:root{
  --safe-t:max(8px,env(safe-area-inset-top));
  --safe-r:max(8px,env(safe-area-inset-right));
  --safe-b:max(8px,env(safe-area-inset-bottom));
  --safe-l:max(8px,env(safe-area-inset-left));
  --ui-scale:clamp(.72,calc(100vw / 1600),1.18);
  
  /* Amber / Gold Glass Color Palette */
  --gold-primary: #e2b755;
  --gold-light: #fff0ad;
  --gold-dark: #8c6319;
  --glass-bg: rgba(38, 26, 12, 0.48);
  --glass-bg-hover: rgba(54, 38, 16, 0.62);
  --glass-border: linear-gradient(135deg, rgba(245, 208, 122, 0.65) 0%, rgba(120, 80, 20, 0.25) 50%, rgba(220, 175, 80, 0.45) 100%);
  --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), inset 0 1px 2px rgba(255, 235, 170, 0.4);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#020708;
  color:#eee;
  font-family:Tahoma,"Segoe UI",sans-serif;
}

button,input{font:inherit}

#game{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  image-rendering:pixelated;
  z-index:0;
}

/* Login SPR background - decoded into canvas by main.js */
#bgSprContainer {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background: #020708;
}

#loginBgCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
}

.hidden{display:none!important}


/* HUD Root Overlay */
#gameUiRoot{position:fixed;inset:0;z-index:10;pointer-events:none}
.pt-hud,.pt-chat,.pt-bottom-stack,.pt-modal-layer{position:absolute}
.pt-ui-bg{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}

/* Top-Left Player HUD — geometry mirrors PC UiHeaderControlBar [Main]: the
   sprite is 223x80 and every text box uses its INI coordinates in % of that
   sprite (Name_Text72,8 · Life bar68,22,144x8 · Mana bar70,32,140x8 ·
   Life_Text/Mana_Text centred per HAlign=1). container-type enables cqw
   fonts that scale with the sprite like the native bitmap font. */
.pt-hud-player{
  top:var(--safe-t);left:var(--safe-l);
  width:clamp(220px,21vw,360px);aspect-ratio:223/80;
  container-type:inline-size;
  pointer-events:auto;
}
.pt-hud-player .pt-ui-bg{object-fit:contain;object-position:left top;opacity:.98}
.pt-portrait{
  position:absolute;left:2.5%;top:7%;width:22%;aspect-ratio:1;border-radius:50%;
  background:rgba(0,0,0,.16);overflow:visible;
}
.pt-portrait canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.pt-level-badge{
  position:absolute;left:-6%;bottom:-8%;min-width:34%;height:32%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#4a3a18,#1d1506);
  border:1px solid #c69b48;border-radius:50%;
  color:#ffd76a;font-size:clamp(8px,4.5cqw,12px);font-weight:bold;text-shadow:0 1px 1px #000;
  z-index:2;
}
.pt-player-name{
  position:absolute;left:32.29%;top:10%;width:50.67%;height:17.5%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(9px,6.28cqw,14px);color:#fffbfe;text-shadow:1px 1px 1px #000;
  white-space:nowrap;overflow:hidden;
}
.pt-vital{position:absolute;height:10%;display:flex;align-items:center}
.pt-vital .pt-bar{position:relative;flex:1;height:100%;background:#171713;border:1px solid rgba(198,155,72,.42);overflow:hidden}
.pt-vital-hp{left:30.49%;top:27.5%;width:64.57%}
.pt-vital-mp{left:31.39%;top:40%;width:62.78%}
.pt-bar{background:#171713;border:1px solid rgba(198,155,72,.42);overflow:hidden}
.pt-bar span{display:block;width:100%;height:100%}.pt-bar.hp span{background:linear-gradient(#db543d,#8f1e18)}.pt-bar.mp span{background:linear-gradient(#56a4d4,#1f5c91)}
.pt-vital-text{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:clamp(8px,6.28cqw,14px);line-height:1;text-align:center;
  white-space:nowrap;pointer-events:none;text-shadow:1px 1px 1px #000;
}
.pt-vital-hp .pt-vital-text{left:27.78%;width:55.56%;color:#edcac3}
.pt-vital-mp .pt-vital-text{left:28.57%;width:57.14%;color:#b3e0f7}

/* Minimap */
.pt-minimap{
  top:var(--safe-t);right:var(--safe-r);
  width:clamp(170px,16vw,280px);aspect-ratio:173/162;
  container-type:inline-size;
  pointer-events:auto;
}
/* TitleImage INI Left=-20: the strip overhangs the panel's left edge on PC,
   so the canvas is widened to the full189px sprite and shifted by -20/173. */
/* TitleImage INI Left=-20: the strip overhangs the panel's left edge on PC,
-- the chrome plate art is opaque, so the map thumbnail draws ABOVE it and the
-- decorative border shows around the img box. */
.pt-minimap>canvas{z-index:1;left:-11.56%;right:auto;width:109.25%}
/* MapRect INI:3,17,150x124 of the173x162 panel. */
#miniMapImage{
  position:absolute;left:1.73%;top:10.49%;width:86.7%;height:76.54%;
  object-fit:cover;z-index:2;image-rendering:auto;background:#111;
  border:1px solid rgba(198,155,72,.55);
}
#miniMapLive{position:absolute;left:1.73%;top:10.49%;width:86.7%;height:76.54%;z-index:3;pointer-events:auto;cursor:crosshair;touch-action:none}
#toolbarBg{position:absolute;left:0;bottom:0;width:762px;height:55px;pointer-events:none;image-rendering:pixelated}
#gameUiRoot.ui-mode-mobile #toolbarBg{display:none}
.pt-portrait{left:0;top:3.75%;width:32.287%;height:90%;aspect-ratio:auto;background:none;border-radius:0}
.pt-portrait canvas{border-radius:0;object-fit:contain}
.pt-player-name{top:7.5%}
.pt-level-badge{left:62.5%;top:59.722%;bottom:auto;width:48.611%;min-width:0;height:47.222%;background:none;border:0;border-radius:0}
#playerLevelBg{position:absolute;inset:0;width:100%;height:100%}
#playerLevelText{position:absolute;left:5.714%;top:5.882%;width:71.429%;height:73.529%;display:grid;place-items:center;z-index:1;font-size:14px}
.pt-item-lifted>.pt-item-icon,.pt-item-lifted>.pt-stack-count,.pt-item-lifted::before{visibility:hidden}
.pt-ib-icon{background:transparent;border:0;padding:0;overflow:visible}
.pt-ib-icon .pt-item-icon{max-width:100%;max-height:100%;object-fit:contain}
.pt-ib-tab-caption{position:absolute;inset:1px;display:grid;place-items:center;background:#75612b;color:#fff1ba;font:11px 'Times New Roman',serif;pointer-events:none}
/* SceneName (15,5,129x14) and ScenePos (2,19,130x14): centred green text
   per the PC UiMiniMapSmall.ini — map name on the title strip, coordinates
   overlapping the top of the map image. */
.pt-minimap-text{position:absolute;inset:0;z-index:4;pointer-events:none;color:#00ff00;text-shadow:1px 1px #000;font-size:clamp(8px,8.09cqw,14px)}
.pt-minimap-text strong,.pt-minimap-text span{position:absolute;height:8.64%;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden}
.pt-minimap-text strong{left:8.67%;top:3.09%;width:74.57%}
.pt-minimap-text span{left:1.16%;top:11.73%;width:75.14%}
.pt-minimap-actions{position:absolute;z-index:5;right:0;bottom:0;display:flex;gap:2px;align-items:end}

/* SPR Button */
.pt-spr-button{
  border:0;background:transparent;padding:0;margin:0;cursor:pointer;pointer-events:auto;
  width:clamp(28px,2.7vw,48px);aspect-ratio:var(--native-ratio,1);
  display:grid;place-items:center;filter:drop-shadow(0 1px 1px #000);
}
.pt-spr-button canvas{width:100%;height:auto;image-rendering:pixelated;display:block}
.pt-spr-button:hover{filter:brightness(1.07) drop-shadow(0 1px 2px #000)}
.pt-spr-button.missing-spr::after{content:"?";color:#ff9f7e}

/* Chat HUD */
.pt-chat{
  left:var(--safe-l);bottom:calc(var(--safe-b) + clamp(74px,9vh,115px));
  width:clamp(270px,30vw,510px);height:clamp(132px,20vh,245px);
  pointer-events:auto;background:linear-gradient(180deg,rgba(14,18,13,.18),rgba(14,18,13,.62));
  border:1px solid rgba(172,135,65,.35);border-radius:4px;overflow:hidden;
}
.pt-chat-log{position:absolute;inset:7px 7px 30px;padding:5px;overflow:auto;font-size:clamp(11px,.78vw,14px);line-height:1.35;color:#f6eaa5;text-shadow:1px 1px #000}
.pt-chat-input-wrap{position:absolute;left:0;right:0;bottom:0;height:26px}
.pt-chat-input-wrap canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#webChatInput{position:absolute;inset:2px 6px;width:calc(100% - 12px);height:22px;border:0;outline:0;background:transparent;color:#fff8a8}

/* Bottom Stack */
.pt-bottom-stack{
  left:50%;bottom:var(--safe-b);transform:translateX(-50%);
  width:min(96vw,1000px);display:flex;flex-direction:column;align-items:center;gap:3px;
  pointer-events:none;
}
.pt-hotbar{position:relative;width:clamp(280px,38vw,560px);height:clamp(40px,4.8vw,72px);pointer-events:auto}
.pt-hotbar>canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.pt-hotbar-slots{position:absolute;inset:7% 8%;display:grid;grid-template-columns:repeat(4,1fr);gap:2.5%}
.pt-hotbar-slots button{border:1px solid rgba(179,139,65,.38);background:rgba(20,18,12,.28);color:#ffe6a0;border-radius:2px}
.pt-toolbar{
  pointer-events:auto;display:flex;justify-content:center;align-items:end;gap:clamp(1px,.18vw,3px);
  max-width:96vw;padding:2px 6px;
}
.pt-toolbar .pt-spr-button{width:clamp(30px,3.2vw,52px)}

/* Modals */
.pt-modal-layer{inset:0;z-index:50;pointer-events:none;display:grid;place-items:center}
.pt-game-modal{
  position:relative;pointer-events:auto;width:min(88vw,620px);max-height:82vh;aspect-ratio:1.3;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.65));
}
.pt-modal-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.pt-modal-header{position:absolute;left:6%;right:5%;top:3%;z-index:2;display:flex;justify-content:space-between;align-items:center;color:#ffe6a4;text-shadow:1px 1px #000}
.pt-modal-close{pointer-events:auto;border:1px solid #806127;background:#2b2115;color:#f6d99a;border-radius:3px;min-width:28px;min-height:24px}
.pt-modal-content{position:absolute;z-index:2;left:8%;right:8%;top:14%;bottom:8%;display:grid;place-items:center;color:#e9dfbd;text-shadow:1px 1px #000}
.pt-modal-content:not(.pt-native-inventory)>button{display:block;width:min(80%,280px);margin:8px;padding:8px;background:#342718;color:#f3dfa7;border:1px solid #80622f}
.pt-grid-placeholder{width:72%;height:72%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(7,1fr);gap:3px}
.pt-grid-placeholder::before{content:"";grid-column:1/-1;grid-row:1/-1;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 2px),rgba(206,164,82,.18) calc(20% - 2px) 20%),repeating-linear-gradient(0deg,transparent 0 calc(14.28% - 2px),rgba(206,164,82,.18) calc(14.28% - 2px) 14.28%)}
.pt-inventory-caption{position:absolute;top:1%;left:4%;font-size:12px;color:#f4dc9c}
.pt-inventory-grid{position:absolute;inset:12% 4% 4%;display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));grid-auto-rows:58px;gap:5px;overflow:auto;padding:4px}
.pt-inventory-item{white-space:pre-line;overflow:hidden;border:1px solid rgba(211,167,70,.55);border-radius:3px;background:rgba(35,27,15,.7);color:#ffe7a2;font:10px/1.25 Consolas,monospace;cursor:pointer}
.pt-inventory-item:hover{background:rgba(95,68,20,.85);border-color:#ffe28b}
.pt-two-col-placeholder{width:88%;height:76%;display:grid;grid-template-columns:38% 1fr;gap:4%;align-items:stretch}
.pt-two-col-placeholder>div{padding:8px;border:1px solid rgba(211,173,93,.28);background:rgba(10,10,8,.3)}
.pt-status-summary{display:flex;flex-direction:column;gap:8px;align-items:center}

/* -------------------------------------------------------------
 * LIQUID GLASS LOGIN OVERLAY (CĂN GIỮA MÀN HÌNH - MÀU VÀNG NÂU)
 * ------------------------------------------------------------- */
#bootHud {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.in-world #bootHud {
  display: none !important;
}
/* The login SPR background must leave the screen once the world is shown,
   otherwise it covers the PixiJS game canvas (z-index 2 > #game). */
.in-world #bgSprContainer {
  display: none !important;
}

/* Base Liquid Glass Panel Style */
.liquid-glass {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--glass-shadow);
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Glass Metallic Border Effect */
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1.5px;
  background: var(--glass-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Ambient liquid light glow */
.glass-reflection {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 220, 130, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

/* Căn rộng ô login trung tâm */
.panel.login {
  width: min(92vw, 380px);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 2;
}

.brand-header {
  text-align: center;
  margin-bottom: 2px;
}

.brand-header h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  margin: 0;
  background: linear-gradient(180deg, #fff7d6 0%, #e2b755 60%, #996f1d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
  letter-spacing: 2.5px;
}

.brand-header .subtitle {
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--gold-primary);
  text-transform: uppercase;
  opacity: 0.85;
}

.badge {
  font-size: 11px;
  color: #d1b782;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(210, 168, 80, 0.25);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-wrapper input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(15, 12, 8, 0.65);
  border: 1px solid rgba(180, 135, 50, 0.35);
  color: #fff6da;
  outline: none;
  transition: all 0.25s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.input-wrapper input::placeholder {
  color: rgba(220, 190, 140, 0.5);
}

.input-wrapper input:focus {
  border-color: var(--gold-primary);
  background: rgba(25, 18, 10, 0.8);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 14px rgba(226, 183, 85, 0.4);
}

/* Liquid Gold Button */
.btn-liquid-gold {
  position: relative;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #b88a32 0%, #735114 100%);
  color: #fff9e6;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 235, 170, 0.5);
  transition: all 0.3s ease;
}

.btn-liquid-gold::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,235,170,0.4) 0%, transparent 70%);
  transform: scale(0);
  transition: transform 0.5s ease;
}

.btn-liquid-gold:hover {
  background: linear-gradient(135deg, #d4a23e 0%, #8c6319 100%);
  box-shadow: 0 6px 18px rgba(226, 183, 85, 0.38), inset 0 1px 2px rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

.btn-liquid-gold:hover::before {
  transform: scale(1);
}

.btn-liquid-gold:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

#status {
  font-size: 12px;
  color: #c0a875;
  text-align: center;
}

/* Roles Panel (Hiện ra ở chính giữa) */
.roles {
  width: min(92vw, 420px);
  padding: 24px;
}

.roles h2 {
  margin-top: 0;
  color: var(--gold-primary);
  text-align: center;
}

.roles button {
  margin: 6px;
  padding: 10px 16px;
  border: 1px solid rgba(226, 183, 85, 0.4);
  background: rgba(30, 22, 12, 0.6);
  color: #f5dfaa;
  border-radius: 6px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.2s;
}

.roles button:hover {
  background: rgba(70, 50, 20, 0.8);
  border-color: var(--gold-primary);
  color: #fff;
}

/* Diagnostics Log đặt gọn gàng ở góc dưới phải màn hình */
.diagnostics {
  position: fixed;
  right: var(--safe-r);
  bottom: var(--safe-b);
  width: min(90vw, 360px);
  max-height: 35vh;
  padding: 12px 16px;
  z-index: 10;
}

.diagnostics summary {
  cursor: pointer;
  color: var(--gold-primary);
  font-weight: bold;
  font-size: 12px;
}

.diagnostics pre {
  white-space: pre-wrap;
  font-size: 11px;
  color: #a9c7b5;
  background: rgba(0,0,0,0.45);
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.05);
  margin-top: 8px;
}

/* Responsive adjustments */
@media(max-width:900px){
  .pt-hud-player{width:clamp(205px,35vw,300px)}
  .pt-minimap{width:clamp(150px,27vw,220px)}
  .pt-chat{width:min(48vw,380px);height:clamp(110px,18vh,180px)}
  .pt-toolbar .pt-spr-button{width:clamp(28px,5vw,44px)}
}

@media(max-width:700px){
  .pt-chat{width:52vw;bottom:calc(var(--safe-b) + 82px)}
  .pt-toolbar .pt-spr-button:nth-child(n+7){display:none}
  .pt-hotbar{width:44vw}
}

.pt-map-debug{
  position:fixed;
  right:var(--safe-r);
  bottom:var(--safe-b);
  z-index:90;
  padding:4px 7px;
  border-radius:3px;
  background:rgba(0,0,0,.68);
  border:1px solid rgba(120,170,120,.35);
  color:#b7d9b7;
  font:11px Consolas,monospace;
  pointer-events:none;
}

.pt-map-debug.bad{
  color:#ffb2a4;
  border-color:rgba(255,100,80,.55);
}

/* One client scale for every HUD group. Preserve atlas aspect ratios and INI offsets. */
#gameUiRoot.ui-mode-pc{--pc-scale:1}
#gameUiRoot.ui-mode-pc .pt-hud-player{left:0;top:0;width:223px;height:80px;transform:scale(var(--pc-scale));transform-origin:top left}
#gameUiRoot.ui-mode-pc .pt-minimap{right:0;top:0;width:173px;height:162px;transform:scale(var(--pc-scale));transform-origin:top right}
#gameUiRoot.ui-mode-pc .pt-minimap>canvas{right:auto;object-fit:fill}
#gameUiRoot.ui-mode-pc .pt-minimap-actions{inset:0;display:block;pointer-events:none}
.pt-minimap-actions .pt-spr-button{pointer-events:auto}
#gameUiRoot.ui-mode-pc .pt-bottom-stack{left:50%;right:auto;bottom:0;width:762px;height:59px;display:block;transform:translateX(-50%) scale(var(--pc-scale));transform-origin:bottom center}
#gameUiRoot.ui-mode-pc .pt-toolbar{position:absolute;inset:0;display:block;padding:0;max-width:none;pointer-events:none}
.pt-toolbar .pt-spr-button{pointer-events:auto}
#gameUiRoot.ui-mode-pc .pt-hotbar{position:absolute;left:230px;top:19px;width:295px;height:40px}
#gameUiRoot.ui-mode-pc .pt-hotbar-slots{inset:0;display:block}
#gameUiRoot.ui-mode-pc .pt-hotbar-slots button{position:absolute;top:6px;width:32px;height:32px;border:0;background:transparent;text-align:left;vertical-align:top;font-size:10px}
.pt-hotbar-slots button:nth-child(1){left:4px}
.pt-hotbar-slots button:nth-child(2){left:44px}
.pt-hotbar-slots button:nth-child(3){left:84px}
.pt-hotbar-slots button:nth-child(4){left:124px}
#gameUiRoot.ui-mode-pc .pt-chat{left:0;bottom:calc(59px * var(--pc-scale));width:255px;height:155px;transform:scale(var(--pc-scale));transform-origin:bottom left;border:0;border-radius:0}
#gameUiRoot.ui-mode-pc .pt-chat-log{font-size:11px}
.pt-chat-input-wrap{height:19px}
#gameUiRoot.ui-mode-pc #webChatInput{height:17px;font-size:11px}
#gameUiRoot.ui-mode-pc .pt-map-debug{display:none}
#gameUiRoot.ui-mode-pc .pt-toolbar .pt-spr-button{display:grid}
#gameUiRoot.ui-mode-pc .pt-game-modal{max-height:none;max-width:none;aspect-ratio:auto;transform-origin:center}

@media(max-width:700px), (pointer:coarse) and (max-width:1024px){
  #gameUiRoot.ui-mode-mobile .pt-hud-player{left:var(--safe-l);top:var(--safe-t);width:min(48vw,205px);height:auto;transform:none;}
  #gameUiRoot.ui-mode-mobile .pt-minimap{right:var(--safe-r);top:var(--safe-t);width:min(34vw,145px);height:auto;transform:none;}
  #gameUiRoot.ui-mode-mobile .pt-bottom-stack{left:0;right:0;bottom:var(--safe-b);width:100%;height:auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 4px;transform:none;}
  #gameUiRoot.ui-mode-mobile .pt-hotbar{position:relative;left:auto;top:auto;width:min(86vw,360px);height:42px;transform:none;}
  #gameUiRoot.ui-mode-mobile .pt-hotbar-slots{inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}
  #gameUiRoot.ui-mode-mobile .pt-hotbar-slots button{position:relative;left:auto!important;top:auto!important;width:auto;height:100%;border:1px solid rgba(179,139,65,.55);background:rgba(20,18,12,.55);font-size:12px;}
  #gameUiRoot.ui-mode-mobile .pt-toolbar{position:relative;inset:auto;display:flex;width:100%;max-width:100%;gap:3px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 4px;}
  #gameUiRoot.ui-mode-mobile .pt-toolbar .pt-spr-button{position:relative!important;left:auto!important;top:auto!important;flex:0 0 40px;width:40px!important;height:40px!important;}
  #gameUiRoot.ui-mode-mobile .pt-chat{left:var(--safe-l);bottom:calc(var(--safe-b) + 96px);width:min(48vw,245px);height:min(18vh,150px);transform:none;}
  #gameUiRoot.ui-mode-mobile .pt-minimap-actions{display:flex;inset:auto 0 0 auto;gap:1px;}
  #gameUiRoot.ui-mode-mobile .pt-minimap-actions .pt-spr-button{position:relative!important;left:auto!important;top:auto!important;flex:0 0 28px;width:28px!important;height:28px!important;}
  #gameUiRoot.ui-mode-mobile .pt-map-debug{display:none}
}

/* Server-backed inventory, skills and interaction panels. */
.pt-feature-panel{position:absolute;left:50%;top:15%;transform:translateX(-50%);width:min(560px,92vw);max-height:72vh;overflow:auto;padding:16px;pointer-events:auto;z-index:90;border:1px solid #b18a42;background:rgba(20,17,12,.98);box-shadow:0 8px 35px #000a;color:#f3dfaf;font:14px/1.5 Tahoma,sans-serif}
.pt-feature-panel>header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #6a542e;padding-bottom:10px;margin-bottom:12px;font-weight:bold;font-size:18px}
.pt-feature-panel button,.pt-feature-tabs button{background:#35291a;border:1px solid #8f713a;color:#ffe7b1;padding:7px 10px;cursor:pointer;pointer-events:auto}
.pt-feature-panel>button{display:block;margin:6px 0;min-height:36px;width:100%;text-align:left}
.pt-feature-panel>header button{font-size:20px;padding:0 8px}
.pt-feature-panel button:hover,.pt-feature-tabs button:hover,.pt-feature-tabs button.selected{background:#65502b;border-color:#e3bd65}
.pt-feature-panel input{width:100%;padding:8px;background:#17130d;color:#fff;border:1px solid #8f713a}
.pt-feature-layout{width:100%;height:100%;display:flex;flex-direction:column;background:rgba(15,12,7,.93);padding:8px;overflow:hidden}
.pt-feature-tabs{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:8px;flex:none}
.pt-feature-tabs button{font-size:12px;padding:5px 7px}
.pt-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(65px,1fr));grid-auto-rows:82px;gap:5px;overflow:auto;align-content:start;flex:1;min-height:0}
.pt-item-cell{position:relative;min-width:0;border:1px solid #8d713b;background:#211b11;color:#ffe5a8;padding:3px;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;overflow:hidden}
.pt-item-cell:hover{border-color:#ffdf77;background:#443518}
.pt-item-cell .pt-item-icon{width:45px;height:48px;object-fit:contain;image-rendering:pixelated}
.pt-item-name{font:10px/1.2 Tahoma,sans-serif;max-width:100%;max-height:26px;overflow:hidden}
.pt-stack-count{position:absolute;bottom:2px;right:3px;font:bold 11px Tahoma;color:#fff;text-shadow:1px 1px #000;pointer-events:none}
.pt-slot-key{position:absolute;left:1px;top:0;color:#fff9a8;z-index:2}
.pt-hotbar-slots .pt-item-icon{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.pt-skill-row{display:flex!important;align-items:center;gap:12px}
.pt-skill-row .pt-item-icon{width:36px;height:36px;object-fit:contain;image-rendering:pixelated;flex:none}
.pt-empty{grid-column:1/-1;padding:12px;font-size:12px}
.pt-large-map{display:block;max-width:100%;max-height:56vh;margin:auto;object-fit:contain}
.pt-dialog-text{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;line-height:1.6}

/* Native role-screen atlas borders with Vietnamese DOM captions. */
.pt-role-button{padding:0;border:0;background:transparent;cursor:pointer;isolation:isolate}
.pt-role-button>canvas{pointer-events:none;z-index:0}
.pt-role-button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.pt-role-button:focus-visible{outline:2px solid #ffe5a0;outline-offset:2px}
.pt-role-button.pt-role-class>span{opacity:0}
.pt-role-hit{padding:0;border:0;background:transparent;cursor:pointer;outline-offset:-12px}
.pt-role-hit:focus-visible{outline:1px solid #ffe5a0}

/* UiItem: native 538x459 atlas, mannequin slots at the client offsets,
   and the fixed-position 5x7 bag. The parent modal supplies shrink-only fit. */
.pt-game-modal[data-modal="items"] .pt-modal-header{display:none}
.pt-game-modal[data-modal="items"] .pt-modal-content.pt-native-inventory{inset:0;display:block;text-shadow:1px 1px #000}
.pt-inventory-art{pointer-events:none;image-rendering:pixelated}
.pt-native-inventory>button{margin:0;min-width:0;min-height:0;box-sizing:border-box;line-height:normal;white-space:nowrap;appearance:none}
.pt-native-equip-slot,.pt-native-bag-cell,.pt-native-bag-item{border:0;padding:3px;background:transparent;color:#fff;cursor:pointer}
.pt-native-equip-slot{z-index:2;display:flex;align-items:center;justify-content:center}
.pt-native-bag-cell{z-index:2}
.pt-native-compact-bag .pt-native-bag-cell{background:#1d1b15;border:1px solid #514b35;box-shadow:inset 0 0 6px #080806}
.pt-native-bag-item{z-index:3;display:flex;align-items:center;justify-content:center}
.pt-native-equip-slot .pt-item-icon,.pt-native-bag-item .pt-item-icon{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.pt-native-bag-item .pt-stack-count{bottom:auto;top:2px;left:3px;right:auto;color:#eee3a1}
.pt-inventory-tab{color:#e9d6a4;font:11px Tahoma,sans-serif;line-height:20px;pointer-events:none}
.pt-inventory-close{border:0;background:transparent;color:#ffe6bb;font:bold 20px/16px Tahoma;cursor:pointer;z-index:5;padding:0;border-radius:50%}
.pt-native-bag-tab,.pt-native-item-action{padding:0;border:1px solid #8b7845;background:linear-gradient(#473e26,#211f17);color:#e3dbb1;font:10px Tahoma,sans-serif;cursor:pointer;z-index:4}
.pt-native-bag-tab.selected{color:#fff5c4;border-color:#e5c66a;background:#6c5327}
.pt-native-item-action:disabled{opacity:.65;cursor:default}
.pt-native-item-value{font:11px/13px Tahoma,sans-serif;text-align:center;color:#ffe5a0;pointer-events:none;z-index:4}
.pt-native-inventory>.pt-native-atlas-button{border:0;padding:0;background:transparent;box-shadow:none;white-space:nowrap}
.pt-native-atlas-button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pt-native-atlas-button:disabled{opacity:1}
.pt-native-atlas-button:focus-visible{outline:1px solid #eed47b;outline-offset:1px}

/* Atlas-backed windows: DOM nodes provide input and changing server text only. */
.pt-native-window{position:absolute;pointer-events:auto;transform-origin:top left;font:12px Tahoma,sans-serif;color:#e7dfb8;text-shadow:1px 1px #000}
.pt-native-art{pointer-events:none;image-rendering:pixelated}
.pt-native-window .pt-native-hit,.pt-native-window .pt-native-skill,.pt-native-window .pt-native-shop-item{margin:0;padding:0;border:0;background:transparent;appearance:none;color:inherit;cursor:pointer;font:inherit;text-shadow:inherit}
.pt-native-hit:focus-visible,.pt-native-skill:focus-visible,.pt-native-shop-item:focus-visible{outline:1px solid #dfc875;outline-offset:-1px}
.pt-native-drag{cursor:move;touch-action:none}
.pt-native-label{white-space:nowrap;line-height:14px;pointer-events:none;overflow:hidden}
.pt-native-note{margin:0;line-height:1.6;white-space:normal}
.pt-native-scroll,.pt-native-dialog-message,.pt-native-dialog-choices{overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.pt-native-window .pt-native-text-choice{display:block;width:100%;padding:3px 1px;margin:0;border:0;background:transparent;color:#f1f199;text-align:left;font:inherit;cursor:pointer;text-shadow:1px 1px #000}
.pt-native-window .pt-native-text-choice:hover{color:#fff}
.pt-native-window .pt-quest-list{white-space:normal;display:block;padding:0;box-sizing:border-box;scrollbar-width:thin}
.pt-native-window .pt-quest-list>.pt-native-text-choice{height:auto;min-height:0;line-height:15px;padding:1px 0;white-space:normal;overflow-wrap:normal;vertical-align:top}
.pt-native-window .pt-quest-text{font:12px/15px 'Times New Roman',serif;white-space:pre-wrap;box-sizing:border-box;padding:0}
.pt-native-skill-icon{display:flex;align-items:center;justify-content:center}
.pt-native-skill-icon .pt-item-icon{max-width:33px;max-height:33px;width:auto;height:auto}
.pt-native-skill-name,.pt-native-skill-level{position:absolute;color:#e4d7ac;white-space:normal;text-align:left;font-size:10px;max-width:66px;line-height:12px}
.pt-native-skill-level{color:#00ff00}
.pt-native-shop-icon{position:absolute;left:0;top:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.pt-native-shop-icon canvas{max-width:32px;max-height:32px;width:auto;height:auto}
.pt-native-shop-name,.pt-native-shop-price{position:absolute;left:35px;right:0;text-align:left;font-size:10px;white-space:nowrap;overflow:hidden}
.pt-native-shop-name{top:4px;color:#eee}.pt-native-shop-price{top:19px;color:#ffe98e}
.pt-native-number{background:#000b;border:1px solid #80682f;color:#f1f199;font:12px Tahoma}
.pt-native-answer-caption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#f1f199;font:12px Tahoma;text-shadow:1px 1px #000}
.pt-item-tooltip{position:fixed;z-index:250;pointer-events:none;width:410px;max-width:calc(100vw - 12px);max-height:calc(100vh - 12px);overflow:hidden;padding:7px 9px;border:1px solid #826420;background:rgba(41,44,41,.68);color:#eee;font:12px/1.35 "Times New Roman",serif;font-weight:bold;text-shadow:1px 1px #000,-1px -1px #000;white-space:normal;text-align:center}
.pt-tooltip-body{margin-left:76px;min-width:0}
.pt-tooltip-title{display:block;letter-spacing:.5px;font-size:13px}
.pt-tooltip-stars{color:#ffe83c;letter-spacing:1px;line-height:18px}
.pt-tooltip-description{max-width:320px;margin:4px 0 18px;color:#eee;font-weight:bold}
.pt-tooltip-line{white-space:pre-wrap}
.pt-tooltip-magic{color:rgb(99,101,255)}.pt-tooltip-active,.pt-tooltip-power{color:#ffff00}.pt-tooltip-inactive{color:rgb(120,120,120)}.pt-tooltip-requirement{color:#eee}.pt-tooltip-locked{color:#ff0000}.pt-tooltip-insured{color:#00ff00}
.pt-tooltip-weight{margin-top:24px}
.pt-tooltip-help{margin:20px 0 0;color:#eee;font-size:11px;white-space:pre-wrap}
.pt-tooltip-picture{position:absolute;left:8px;top:35%;display:flex;align-items:center;justify-content:center;width:66px;min-height:86px;max-height:112px;border:1px solid #826420;background:#252c223b}
.pt-tooltip-picture .pt-item-icon{max-width:72px;max-height:108px;width:auto;height:auto;image-rendering:pixelated}
.pt-item-bordered::before{content:"";position:absolute;inset:1px;border:1px solid var(--item-border);box-shadow:inset 0 0 0 1px var(--item-border);pointer-events:none;z-index:4;animation:pt-item-border 1.4s steps(8) infinite alternate}
@keyframes pt-item-border{from{opacity:.5}to{opacity:1}}
.pt-carrying-item .pt-native-bag-cell,.pt-carrying-item .pt-native-equip-slot,.pt-carrying-item .pt-native-bag-item{cursor:grabbing}
.pt-carried-item{position:fixed;pointer-events:none;z-index:280;opacity:.85;transform:translate(-50%,-50%);display:grid;place-items:center}
.pt-carried-item canvas{max-width:100px;max-height:140px;image-rendering:pixelated}

/* Every atlas window uses a single native coordinate space on both modes. */
.pt-game-modal{max-height:none;max-width:none;aspect-ratio:auto;transform-origin:center;flex:none}
.pt-modal-layer{display:block}
.pt-modal-drag{position:absolute;left:20px;right:45px;top:0;height:24px;z-index:12;pointer-events:auto;touch-action:none;cursor:move}
.pt-game-modal[data-modal="items"]>.pt-modal-content{position:absolute;inset:0;margin:0;padding:0;display:block;width:100%;height:100%;transform:none}
.pt-desktop-skills{position:absolute;inset:0;pointer-events:none}
.pt-desktop-skills button{position:absolute;top:10px;width:32px;height:32px;border:0;padding:0;background:transparent;pointer-events:auto;cursor:pointer;display:grid;place-items:center;overflow:hidden}
.pt-desktop-skills [data-skill-side="left"]{left:220px}
.pt-desktop-skills [data-skill-side="right"]{left:260px}
.pt-desktop-skills canvas{width:28px;height:28px;max-width:28px;max-height:28px;object-fit:contain;pointer-events:none}
#gameUiRoot.ui-mode-pc .pt-desktop-skills button{top:6px}
#gameUiRoot.ui-mode-pc .pt-toolbar [data-action="ibshop"]{left:391px!important;top:7px!important;width:52px!important;height:52px!important;overflow:hidden}
#gameUiRoot.ui-mode-pc .pt-toolbar [data-action="ibshop"] canvas{width:100%;height:100%;object-fit:contain}
.pt-desktop-skill-picker{position:absolute;left:4px;bottom:46px;display:flex;flex-wrap:wrap;gap:3px;width:max-content;max-width:286px;max-height:176px;overflow-y:auto;padding:3px;border:1px solid #776337;background:#10150ed9;box-sizing:border-box;pointer-events:auto;z-index:80}
.pt-desktop-pick-skill{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;padding:2px;border:1px solid #837044;background:#0c100cc9;box-sizing:border-box;cursor:pointer}
.pt-desktop-pick-skill .pt-item-icon{width:28px;height:28px;object-fit:contain;pointer-events:none}
.pt-desktop-pick-skill:hover,.pt-desktop-pick-skill[aria-pressed="true"]{border-color:#f4d66e;background:#4b3e21}
#gameUiRoot.ui-mode-mobile .pt-desktop-skill-picker{display:none}
#gameUiRoot.ui-mode-mobile #hotbarBg,#gameUiRoot.ui-mode-mobile .pt-desktop-skills{display:none}
#gameUiRoot.ui-mode-mobile .pt-hotbar-slots{display:grid;grid-template-columns:repeat(4,38px);gap:5px;inset:0}
#gameUiRoot.ui-mode-mobile .pt-hotbar-slots button{position:relative!important;left:auto!important;top:auto!important;width:38px;height:34px;border:1px solid #b79b56;border-radius:3px;background:rgba(13,19,16,.7);padding:2px;color:#ffe5a0;box-sizing:border-box;font:11px Tahoma}
#gameUiRoot.ui-mode-mobile .pt-hotbar{width:167px;height:34px}
#gameUiRoot.ui-mode-mobile .pt-minimap{width:140px;height:131px;max-width:31vw;right:max(4px,env(safe-area-inset-right));top:max(4px,env(safe-area-inset-top));transform:none;overflow:visible}
#gameUiRoot.ui-mode-mobile .pt-minimap-actions{position:absolute;inset:0;display:block;pointer-events:none}
#gameUiRoot.ui-mode-mobile .pt-minimap-actions .pt-spr-button{position:absolute!important;left:auto!important;right:0;top:auto!important;bottom:-26px;width:25px!important;height:25px!important}
#gameUiRoot.ui-mode-mobile .pt-minimap-actions [data-action="worldmap"]{right:54px}
#gameUiRoot.ui-mode-mobile .pt-minimap-actions [data-action="minimap-zoom"]{right:27px}
#gameUiRoot.ui-mode-mobile .pt-mobile-combat{width:214px;height:190px;right:max(8px,env(safe-area-inset-right));bottom:max(44px,calc(env(safe-area-inset-bottom) + 40px))}

/* Touch layout is separate from the native desktop anchors. */
.pt-mobile-shell{position:fixed;inset:0;z-index:35;pointer-events:none;--touch-size:clamp(40px,8vh,54px)}
.pt-mobile-shell[hidden],.pt-mobile-play[hidden]{display:none!important}
.pt-mobile-fullscreen{position:absolute;top:max(6px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:40px;height:30px;pointer-events:auto;border:1px solid #b09148;border-radius:5px;background:#161c14b3;color:#f8df9d;font:24px/1 Tahoma;cursor:pointer}
.pt-joystick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(48px,calc(env(safe-area-inset-bottom) + 42px));width:clamp(108px,29vh,146px);aspect-ratio:1;border:2px solid #d1b97883;border-radius:50%;background:radial-gradient(circle,#1a21183d 48%,#8c9c7138 50%,#18221c45 68%,#d3bd7833 70%);box-shadow:inset 0 0 16px #0006;pointer-events:auto;touch-action:none;user-select:none;display:grid;place-items:center}
.pt-joystick-knob{width:39%;aspect-ratio:1;border-radius:50%;border:1px solid #d6c186ae;background:radial-gradient(circle at 35% 30%,#b7ad7ba8,#454b34b0 60%,#181f18ba);box-shadow:0 3px 9px #0006;pointer-events:none;will-change:transform}
.pt-mobile-combat{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(46px,calc(env(safe-area-inset-bottom) + 40px));width:214px;height:190px;pointer-events:none}
.pt-mobile-attack,.pt-mobile-skill{position:absolute;border-radius:50%;border:2px solid #d2b86d;background:radial-gradient(#4a3c26aa,#1b2118e0);padding:2px;box-shadow:0 2px 5px #0009;overflow:hidden;pointer-events:auto;touch-action:none;user-select:none;display:flex;align-items:center;justify-content:center}
.pt-mobile-attack{width:70px;height:70px;right:26px;bottom:8px}
.pt-mobile-attack>span{position:absolute;bottom:4px;color:#fff2ba;font:bold 11px Tahoma;text-shadow:1px 1px #000;pointer-events:none}
.pt-mobile-attack canvas{width:100%;height:100%;object-fit:contain;pointer-events:none}
.pt-mobile-skill{width:var(--touch-size);height:var(--touch-size)}
.pt-mobile-skill canvas{width:100%;height:100%;object-fit:contain;pointer-events:none;image-rendering:pixelated}
.pt-mobile-skill.empty{border-color:#cbbd8a66;background:rgba(12,18,14,.42);box-shadow:inset 0 0 9px #0005}
.pt-mobile-skill-picker{overflow:auto;overscroll-behavior:contain;font:12px Tahoma;color:#e8ddb8}
.pt-native-window .pt-mobile-pick-skill{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;border:0;padding:4px 2px;background:transparent;color:#e8ddb8;text-align:left;font:12px Tahoma;cursor:pointer}
.pt-mobile-pick-skill canvas{order:-1;max-width:36px;max-height:36px}
.pt-mobile-pick-skill:hover{color:#fff}
.pt-mobile-skill[data-index="0"]{right:108px;bottom:2px}
.pt-mobile-skill[data-index="1"]{right:151px;bottom:49px}
.pt-mobile-skill[data-index="2"]{right:136px;bottom:108px}
.pt-mobile-skill[data-index="3"]{right:78px;bottom:136px}
.pt-mobile-skill[data-index="4"]{right:21px;bottom:111px}
.pt-mobile-skill[data-index="5"]{right:0;bottom:57px}
.pt-mobile-attack:active,.pt-mobile-skill:active{filter:brightness(1.3)}
.pt-mobile-utilities{position:absolute;right:calc(min(25vw,140px) + 14px);top:max(12px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:7px;pointer-events:auto}
.pt-mobile-utilities button{min-width:52px;min-height:30px;background:#172717bd;border:1px solid #b39a54;border-radius:14px;color:#f4e9b7;font:10px Tahoma;padding:3px 6px;touch-action:manipulation}
.pt-mobile-target{position:absolute;bottom:-7px;right:0;max-width:190px;white-space:nowrap;overflow:hidden;color:#ffeaa2;font:10px Tahoma;text-shadow:1px 1px #000}
.pt-mobile-toast{position:absolute;left:50%;top:48px;transform:translateX(-50%);max-width:80vw;padding:5px 8px;color:#fff0b5;background:#111c;font:12px Tahoma;text-align:center}
.pt-mobile-toast:empty{display:none}
#gameUiRoot.ui-mode-mobile .pt-hud-player{left:max(5px,env(safe-area-inset-left));top:max(5px,env(safe-area-inset-top));width:min(36vw,205px);height:auto;transform:none}
#gameUiRoot.ui-mode-mobile .pt-minimap{right:max(5px,env(safe-area-inset-right));top:max(5px,env(safe-area-inset-top));width:min(25vw,140px);height:auto;transform:none}
#gameUiRoot.ui-mode-mobile .pt-bottom-stack{left:50%;right:auto;bottom:max(3px,env(safe-area-inset-bottom));width:min(96vw,500px);height:34px;padding:0;display:block;transform:translateX(-50%)}
#gameUiRoot.ui-mode-mobile .pt-toolbar{position:absolute;inset:0;width:100%;display:flex;align-items:center;justify-content:center;gap:2px;padding:0;overflow-x:auto;scrollbar-width:none}
#gameUiRoot.ui-mode-mobile .pt-toolbar .pt-spr-button{position:relative!important;left:auto!important;top:auto!important;display:grid!important;flex:0 0 28px;width:28px!important;height:auto!important;min-height:28px;max-height:32px}
#gameUiRoot.ui-mode-mobile .pt-hotbar{position:absolute;top:auto;left:50%;bottom:38px;transform:translateX(-50%);width:174px;height:32px}
#gameUiRoot.ui-mode-mobile .pt-hotbar-slots{inset:0;gap:4px}
#gameUiRoot.ui-mode-mobile .pt-hotbar-slots button{width:38px;height:32px;font-size:10px;touch-action:manipulation}
#gameUiRoot.ui-mode-mobile .pt-chat{left:50%;bottom:82px;transform:translateX(-50%);width:min(34vw,280px);height:68px}
#gameUiRoot.ui-mode-mobile .pt-chat-log{font-size:10px;inset:3px 3px 20px;padding:1px;line-height:1.2}
#gameUiRoot.ui-mode-mobile .pt-chat-input-wrap{height:18px}
#gameUiRoot.ui-mode-mobile #webChatInput{font-size:11px;height:16px}
@media(orientation:portrait){
  .pt-mobile-combat{transform:scale(.88);transform-origin:bottom right;bottom:52px}
  .pt-joystick{width:112px;bottom:58px;left:14px}
  .pt-mobile-utilities{top:145px;right:max(10px,env(safe-area-inset-right))}
  #gameUiRoot.ui-mode-mobile .pt-chat{left:8px;transform:none;bottom:220px;width:54vw;height:85px}
  #gameUiRoot.ui-mode-mobile .pt-hotbar{bottom:38px;width:174px}
  #gameUiRoot.ui-mode-mobile .pt-toolbar .pt-spr-button{flex-basis:25px;width:25px!important}
}
@media(max-height:300px){.pt-mobile-play{display:none}#gameUiRoot.ui-mode-mobile .pt-chat{bottom:38px;height:54px}}
#gameUiRoot.ui-mode-mobile .pt-hotbar{width:167px;height:34px}
#gameUiRoot.ui-mode-mobile .pt-hotbar-slots{gap:5px}
#gameUiRoot.ui-mode-mobile .pt-minimap{width:140px;max-width:31vw;height:auto;aspect-ratio:173/162}
#gameUiRoot .pt-minimap #miniMapChrome{left:-11.56%!important;top:0!important;width:109.25%!important;height:15.432%!important}
#gameUiRoot.ui-mode-mobile>.pt-hotbar{position:absolute;left:auto;right:max(7px,env(safe-area-inset-right));top:calc(min(31vw,140px)*162/173 + 34px);bottom:auto;transform:none;width:32px;height:140px;z-index:30}
#gameUiRoot.ui-mode-mobile>.pt-hotbar .pt-hotbar-slots{display:grid;grid-template-columns:32px;grid-template-rows:repeat(4,32px);gap:4px;inset:0}
#gameUiRoot.ui-mode-mobile>.pt-hotbar .pt-hotbar-slots button{width:32px;height:32px}
#gameUiRoot.ui-mode-mobile .pt-mobile-combat{right:max(42px,env(safe-area-inset-right));bottom:max(38px,env(safe-area-inset-bottom));width:188px;height:170px;--touch-size:40px;transform:none}
#gameUiRoot.ui-mode-mobile .pt-mobile-attack{width:66px;height:66px;right:18px;bottom:4px}
#gameUiRoot.ui-mode-mobile .pt-mobile-skill[data-index="0"]{right:96px;bottom:0}
#gameUiRoot.ui-mode-mobile .pt-mobile-skill[data-index="1"]{right:133px;bottom:42px}
#gameUiRoot.ui-mode-mobile .pt-mobile-skill[data-index="2"]{right:121px;bottom:91px}
#gameUiRoot.ui-mode-mobile .pt-mobile-skill[data-index="3"]{right:70px;bottom:121px}
#gameUiRoot.ui-mode-mobile .pt-mobile-skill[data-index="4"]{right:21px;bottom:100px}
#gameUiRoot.ui-mode-mobile .pt-mobile-skill[data-index="5"]{right:0;bottom:55px}
@media(orientation:landscape){#gameUiRoot.ui-mode-mobile .pt-chat{bottom:41px;height:56px;width:min(30vw,260px)}}
@media(orientation:portrait){
 #gameUiRoot.ui-mode-mobile .pt-chat{left:7px;right:7px;bottom:42px;width:auto;height:48px;transform:none}
 #gameUiRoot.ui-mode-mobile .pt-mobile-combat{bottom:100px}
 #gameUiRoot.ui-mode-mobile .pt-joystick{bottom:108px}
}
#pt-connection-metrics{position:fixed;left:50%;top:max(5px,env(safe-area-inset-top));transform:translateX(-50%);z-index:10000;pointer-events:none;padding:4px 9px;border-radius:4px;background:#09100dd9;color:#a9f8ad;font:12px/1.3 Tahoma,Arial,sans-serif;white-space:pre;text-shadow:1px 1px #000}
#pt-connection-metrics[data-quality="poor"]{color:#ff8585}
#pt-connection-metrics[data-quality="fair"],#pt-connection-metrics[data-quality="waiting"]{color:#ffe08a}
#pt-connection-metrics[data-quality="offline"]{color:#aaa}
body.in-world #pt-connection-metrics{top:max(48px,env(safe-area-inset-top))}