/* pbPT touch HUD (touch-hud.js): the phone/tablet layout of other web MMOs, in the
   classic look of the world map (map-ui-classic.css): dark translucent panels with a
   bronze line, gold Georgia, and the window art of system-assets/native (Help box
   frame, title bar, leather plates; plates only stretch sideways). Buttons, rings and
   hexes are drawn here as gilded bronze; the icons are solid gold engravings
   (touch-hud.js). Skill icons and potions are the game's own art (hud-assets).
   Sizes are CSS px times --k (phone ~.9, tablet ~1.2). */
#pth { --gold:#ffd623; --text:#e9e4d2; --dim:#9f9a86; --line:#a88a52; --line-dark:#4d3d22; --panel:#0b120df0;
  --hp:#e0281c; --mp:#2c5ee8; --sp:#3fb51f; --k:1; --safe-l:max(8px,env(safe-area-inset-left)); --safe-r:max(8px,env(safe-area-inset-right));
  --safe-t:max(6px,env(safe-area-inset-top)); --exp-h:max(14px,calc(12px * var(--k)));
  /* gilded bronze: the edge of medallions and orbs */
  --metal:conic-gradient(from 210deg,#fff0b8,#c9953f 12%,#6b4515 26%,#e6c06a 40%,#fff4c6 50%,#a9752b 63%,#5a3a10 77%,#d9ad55 90%,#fff0b8);
  --well:radial-gradient(circle at 50% 30%,#33281a,#120d07 62%,#070504);
  position:fixed; inset:0; z-index:60; pointer-events:none; color:var(--text); font:calc(12px * var(--k))/1.3 Tahoma,Verdana,sans-serif;
  text-shadow:0 1px 1px #000; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; overflow:hidden; contain:strict; }
#pth[hidden], #pth [hidden] { display:none!important; }
#pth * { box-sizing:border-box; }
:where(#pth) button { margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; touch-action:none; cursor:url('login-assets/game-cursor.png') 0 0,auto; }
#pth .pth-hit { pointer-events:auto; touch-action:none; }
#pth img { display:block; pointer-events:none; }
#pth button:active { filter:brightness(1.3); }
#pth [aria-pressed=true] { filter:brightness(1.25) drop-shadow(0 0 5px #ffd623aa); }

/* gold engravings */
.pth-gilt { fill:url(#pth-gold); stroke:#2a1704; stroke-width:.7; paint-order:stroke; filter:drop-shadow(0 1px 0 #000) drop-shadow(0 0 2px #0009); overflow:visible; }

/* medallion: square bronze well, gilded edge, small gold corners */
.pth-medal { position:relative; border-radius:calc(4px * var(--k)); background:var(--well) padding-box,var(--metal) border-box; border:calc(2px * var(--k)) solid transparent;
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,inset 0 2px 5px #000c,0 2px 5px #000b; }
.pth-medal::before { content:''; position:absolute; inset:calc(2px * var(--k)); pointer-events:none; opacity:.85;
  --c:#e9c46c; --l:calc(5px * var(--k));
  background:linear-gradient(var(--c),var(--c)) 0 0/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) 0 0/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) 100% 0/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) 0 100%/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--l) no-repeat; }
/* orb: the same in a circle */
.pth-orb { position:relative; display:grid; place-items:center; border-radius:50%; background:var(--well) padding-box,var(--metal) border-box;
  border:calc(2px * var(--k)) solid transparent; box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,inset 0 2px 6px #000c,0 2px 5px #000b; }
/* the map's window panel */
.pth-panel { background:var(--panel); border:1px solid var(--line); box-shadow:inset 0 0 0 1px #000,0 2px 6px #000a; }
/* leather plate (box-test-title2) */
.pth-plate { height:calc(23px * var(--k)); padding:0 calc(10px * var(--k)); border-style:solid; border-width:0 calc(6px * var(--k)); border-color:transparent;
  border-image:url('system-assets/native/plate.png') 0 6 fill stretch; color:var(--gold); font:bold calc(11px * var(--k))/1 Georgia,'Times New Roman',serif;
  text-shadow:1px 1px 0 #1b0e00; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:calc(5px * var(--k)); }
/* title bar of the windows */
.pth-title { height:calc(26px * var(--k)); border-style:solid; border-width:0 calc(30px * var(--k)); border-color:transparent;
  border-image:url('system-assets/native/title.png') 0 34 fill stretch; }
.pth-badge { position:absolute; right:calc(-5px * var(--k)); top:calc(-5px * var(--k)); min-width:calc(15px * var(--k)); height:calc(15px * var(--k)); padding:0 3px; border-radius:99px;
  background:radial-gradient(circle at 50% 35%,#e8452f,#8e1208); border:1px solid #ffd9a0; box-shadow:0 1px 2px #000; color:#fff;
  font:bold calc(9px * var(--k))/calc(13px * var(--k)) Tahoma,sans-serif; text-align:center; z-index:2; }
.pth-cap { display:block; color:var(--gold); font:bold calc(8px * var(--k))/1 Georgia,'Times New Roman',serif; letter-spacing:.04em; text-transform:uppercase;
  text-shadow:1px 1px 0 #000,0 0 3px #000,0 0 3px #000; white-space:nowrap; }

/* character: gilded ring with the level, name and HP/MP/RES -------------------- */
.pth-me { position:absolute; left:var(--safe-l); top:var(--safe-t); display:flex; align-items:center; gap:calc(5px * var(--k)); }
.pth-lv { flex:none; width:calc(46px * var(--k)); height:calc(46px * var(--k)); border-width:calc(3px * var(--k)); }
.pth-lv::after { content:''; position:absolute; inset:calc(3px * var(--k)); border-radius:50%; border:1px solid #c9a45c66; pointer-events:none; }
.pth-lv b { color:var(--gold); font:bold calc(16px * var(--k))/1 Georgia,serif; text-shadow:1px 1px 0 #000,0 0 4px #000; }
.pth-bars { width:calc(156px * var(--k)); padding:calc(4px * var(--k)) calc(6px * var(--k)) calc(5px * var(--k)); display:grid; gap:calc(2px * var(--k)); }
.pth-name { display:flex; justify-content:space-between; align-items:baseline; gap:6px; color:var(--gold); font:bold calc(11px * var(--k))/1.2 Georgia,serif; white-space:nowrap; }
.pth-name span { overflow:hidden; text-overflow:ellipsis; }
.pth-name em { font:calc(9.5px * var(--k))/1 Georgia,serif; font-style:normal; color:var(--text); }
.pth-bar { position:relative; height:calc(9px * var(--k)); background:#000; border:1px solid var(--line-dark); box-shadow:inset 0 1px 2px #000; overflow:hidden; }
.pth-bar i { position:absolute; inset:0 auto 0 0; width:var(--v,100%); transition:width .2s;
  background:linear-gradient(#fff7 0,#fff2 35%,#0000 50%,#0004 100%),var(--c); box-shadow:inset 0 0 0 1px #0006; }
.pth-bar span { position:relative; display:block; text-align:right; padding-right:3px; font:bold calc(7.5px * var(--k))/calc(7px * var(--k)) Tahoma,sans-serif; color:#fff; text-shadow:0 0 2px #000,1px 1px 0 #000; }
.pth-hp { --c:var(--hp); } .pth-mp { --c:var(--mp); } .pth-sp { --c:var(--sp); height:calc(6px * var(--k)); }
.pth-sp span { display:none; }
.pth-low .pth-hp i { animation:pth-pulse .8s ease-in-out infinite alternate; }
@keyframes pth-pulse { to { filter:brightness(1.8); } }

/* chat strip, quick bar, chat lines -------------------------------------------- */
.pth-left { position:absolute; left:var(--safe-l); top:calc(var(--safe-t) + 52px * var(--k)); display:grid; gap:calc(5px * var(--k)); justify-items:start; }
.pth-chat { display:flex; align-items:center; gap:calc(4px * var(--k)); }
.pth-chat .pth-medal { width:calc(30px * var(--k)); height:calc(26px * var(--k)); display:grid; place-items:center; }
.pth-chat .pth-medal::before { display:none; }
.pth-chat svg { width:calc(17px * var(--k)); height:calc(17px * var(--k)); }
.pth-say { min-width:calc(150px * var(--k)); justify-content:flex-start!important; color:#cdbf98!important; font:italic calc(11px * var(--k))/1 Georgia,serif!important; }
.pth-quick { display:flex; gap:calc(5px * var(--k)); }
.pth-q { width:calc(46px * var(--k)); height:calc(46px * var(--k)); display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:calc(4px * var(--k)) 0 calc(4px * var(--k)); }
.pth-q svg { width:calc(23px * var(--k)); height:calc(23px * var(--k)); }
.pth-q .pth-cap { font-size:calc(7.5px * var(--k)); }
.pth-log { max-width:calc(260px * var(--k)); display:grid; gap:1px; margin-top:calc(2px * var(--k)); font:calc(10.5px * var(--k))/1.25 Tahoma,Verdana,sans-serif; text-shadow:1px 1px 0 #000,0 0 3px #000; }
.pth-log p { margin:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; transition:opacity 1s; }
.pth-log p.pth-old { opacity:.45; }
#pth.pth-short .pth-log p:nth-last-child(n+4) { display:none; }

/* target: a title plate at the top centre ---------------------------------------- */
.pth-target { position:absolute; left:50%; top:var(--safe-t); transform:translateX(-50%); width:calc(210px * var(--k)); display:grid; justify-items:center; gap:calc(2px * var(--k)); }
.pth-target .pth-title { width:100%; display:grid; place-items:center; color:var(--gold); font:bold calc(11px * var(--k))/1 Georgia,serif; letter-spacing:.04em; white-space:nowrap; overflow:hidden; }
.pth-target.pth-player .pth-title { color:#9fe0ff; } .pth-target.pth-npc .pth-title { color:#a6ff8f; }
.pth-target .pth-bar { width:72%; height:calc(6px * var(--k)); }

/* right column: swap weapon / pick up / run -------------------------------------- */
.pth-side { position:absolute; right:var(--safe-r); bottom:calc(var(--exp-h) + var(--ring) + 12px * var(--k)); display:flex; gap:calc(7px * var(--k)); }
.pth-side button { position:relative; width:calc(42px * var(--k)); display:grid; justify-items:center; gap:calc(3px * var(--k)); }
.pth-side .pth-orb { width:calc(38px * var(--k)); height:calc(38px * var(--k)); }
.pth-side svg { width:calc(21px * var(--k)); height:calc(21px * var(--k)); }

/* skill ring: Attack in a gilded orb, 8 gold-edged hexes around it ------------------ */
#pth { --ring:calc(178px * var(--k)); }
.pth-ring { position:absolute; right:calc(var(--safe-r) + 10px * var(--k)); bottom:calc(var(--exp-h) + 6px * var(--k)); width:var(--ring); height:var(--ring); border-radius:50%;
  background:radial-gradient(circle,#0000 30%,#00000030 31%,#00000020 64%,#0000 66%); }
.pth-attack { position:absolute; left:50%; top:50%; width:calc(74px * var(--k)); height:calc(74px * var(--k)); transform:translate(-50%,-50%); border-radius:50%;
  display:grid; place-items:center; background:radial-gradient(circle at 50% 35%,#4a3518,#160f07 60%,#080503) padding-box,var(--metal) border-box;
  border:calc(4px * var(--k)) solid transparent; box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,inset 0 0 0 calc(4px * var(--k)) #0007,0 4px 10px #000d; }
.pth-attack::before { content:''; position:absolute; inset:calc(5px * var(--k)); border-radius:50%; border:1px solid #d9b46666; pointer-events:none; }
.pth-attack svg { width:56%; height:56%; }
.pth-attack[data-held] { box-shadow:0 0 0 1px #000,inset 0 0 18px #ffb43077,0 0 14px #ffc85288; }
.pth-slot { position:absolute; width:calc(42px * var(--k)); height:calc(38px * var(--k)); margin:calc(-19px * var(--k)) 0 0 calc(-21px * var(--k)); filter:drop-shadow(0 2px 3px #000c); }
.pth-slot::before { content:''; position:absolute; inset:0; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:linear-gradient(160deg,#fff0b8,#d4a24a 30%,#6b4515 55%,#e6c06a 80%,#8a5a1c); }
.pth-slot .pth-ic, .pth-slot .pth-cd { position:absolute; inset:calc(2px * var(--k)); clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.pth-slot .pth-ic { background:var(--well); background-position:center; background-size:cover; background-repeat:no-repeat; }
.pth-slot.pth-empty::before { opacity:.4; }
.pth-slot.pth-empty .pth-ic { background:#0b0805b0!important; }
.pth-slot.pth-pot .pth-ic { background-size:58% auto!important; background-color:#140e07!important; }
.pth-slot .pth-cd { background:conic-gradient(#000c var(--cd,0turn),#0000 0); }
.pth-slot .pth-n { position:absolute; right:18%; bottom:6%; font:bold calc(9px * var(--k))/1 Tahoma,sans-serif; color:#fff; text-shadow:0 0 2px #000,1px 1px 0 #000; }
.pth-slot.pth-nomp .pth-ic { filter:grayscale(.85) brightness(.55); }
.pth-slot.pth-aim { transform:scale(1.15); filter:brightness(1.35) drop-shadow(0 0 5px #ffd623); }
.pth-slot.pth-sel::before { background:linear-gradient(160deg,#fffbe0,#ffd75e 40%,#b8822c 70%,#fff0b8); }

/* joystick: a dark disc in a thin gilded ring, a gold knob --------------------------- */
.pth-stick { position:absolute; left:calc(var(--safe-l) + 8px * var(--k)); bottom:calc(var(--exp-h) + 10px * var(--k)); width:calc(120px * var(--k)); height:calc(120px * var(--k)); border-radius:50%;
  background:radial-gradient(circle,#00000033 0 62%,#00000059 100%) padding-box,var(--metal) border-box; border:calc(2px * var(--k)) solid transparent; opacity:.78;
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,inset 0 0 18px #000a; }
.pth-stick::before { content:''; position:absolute; inset:calc(8px * var(--k)); border-radius:50%; border:1px dashed #d9b46640; pointer-events:none; }
.pth-knob { position:absolute; left:50%; top:50%; width:calc(42px * var(--k)); height:calc(42px * var(--k)); margin:calc(-21px * var(--k)) 0 0 calc(-21px * var(--k)); border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff6cf 0,#e8c06a 18%,#9a6a26 52%,#3d2709 88%) padding-box,var(--metal) border-box; border:calc(2px * var(--k)) solid transparent;
  box-shadow:0 0 0 1px #000,0 4px 8px #000c,inset 0 -4px 8px #0007; transform:translate(var(--x,0),var(--y,0)); }
.pth-stick:not([data-held]) .pth-knob { transition:transform .12s; }

/* belt: three medallions with the potions ------------------------------------------- */
.pth-belt { position:absolute; left:50%; bottom:calc(var(--exp-h) + 6px * var(--k)); transform:translateX(-50%); display:flex; gap:calc(5px * var(--k)); }
.pth-belt button { width:calc(40px * var(--k)); height:calc(40px * var(--k)); }
.pth-belt button img { position:absolute; left:50%; top:52%; width:70%; height:auto; transform:translate(-50%,-50%); }
.pth-belt button.pth-empty img { display:none; }
.pth-belt i { position:absolute; left:calc(4px * var(--k)); top:calc(2px * var(--k)); font:bold calc(8.5px * var(--k))/1 Georgia,serif; font-style:normal; color:#e9c46c; text-shadow:1px 1px 0 #000; }
.pth-belt span { position:absolute; right:calc(3px * var(--k)); bottom:calc(2px * var(--k)); font:bold calc(10px * var(--k))/1 Tahoma,sans-serif; color:#fff; text-shadow:0 0 2px #000,1px 1px 0 #000; }

/* experience: a cyan gauge along the bottom ------------------------------------------- */
.pth-exp { position:absolute; left:0; right:0; bottom:0; height:var(--exp-h); padding-bottom:env(safe-area-inset-bottom); background:#000d; border-top:1px solid var(--line); box-shadow:0 -1px 0 #000; }
.pth-exp i { position:absolute; inset:0 auto 0 0; width:var(--v,0%); background:linear-gradient(#fff6 0,#fff1 45%,#0000 55%),linear-gradient(90deg,#0b6f78,#38d6e4); }
.pth-exp span { position:relative; display:block; text-align:center; font:bold calc(9px * var(--k))/var(--exp-h) Tahoma,sans-serif; color:#fff; text-shadow:0 0 2px #000,1px 1px 0 #000; }

/* windows of the HUD (menu, editor, shortcuts): the Help box frame --------------------- */
.pth-shade { position:absolute; inset:0; background:#0007; pointer-events:auto; z-index:10; }
.pth-box { position:relative; isolation:isolate; text-shadow:0 1px 1px #000; }
.pth-box::after { content:''; position:absolute; inset:6px 6px 10px; z-index:-2; background:#040a07d6; }
.pth-box::before { content:''; position:absolute; inset:0; z-index:-1; border-style:solid; border-width:32px 64px 64px; border-image:url('system-assets/native/frame.png') 32 64 64 fill stretch; opacity:.97; }
.pth-box h2, .pth-box h3 { position:absolute; left:50%; top:-12px; transform:translateX(-50%); width:190px; max-width:calc(100% - 50px); height:28px; margin:0; border-style:solid;
  border-width:0 34px; border-image:url('system-assets/native/title.png') 0 34 fill stretch; display:grid; place-items:center; color:var(--gold); font:bold 13px/1 Georgia,serif;
  letter-spacing:.08em; text-shadow:1px 1px 0 #1b0e00,-1px 0 0 #000; white-space:nowrap; }
.pth-drawer { position:absolute; z-index:11; left:var(--safe-l); top:calc(var(--safe-t) + 12px); bottom:calc(var(--exp-h) + 6px); width:min(250px,calc(100vw - 32px)); padding:28px 18px 46px;
  display:flex; flex-direction:column; pointer-events:auto; animation:pth-in .14s ease-out; }
.pth-list { flex:1; overflow-y:auto; overscroll-behavior:contain; display:grid; align-content:start; padding-right:4px; scrollbar-width:thin; scrollbar-color:#a88a52 #0b120d; }
.pth-list button { height:36px; display:flex; align-items:center; gap:10px; padding:0 8px; text-align:left; color:var(--gold); font:bold 13px/1 Georgia,serif; border-bottom:1px solid #a88a5530; }
.pth-list button:active { background:#a88a5530; }
.pth-list button svg { flex:none; width:20px; height:20px; }
.pth-list hr { width:100%; height:1px; margin:4px 0; border:0; background:linear-gradient(90deg,transparent,#a88a52,transparent); }
.pth-drawer .pth-foot { position:absolute; left:22px; right:22px; bottom:13px; display:flex; justify-content:flex-end; }
@keyframes pth-in { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } }
.pth-dialog { position:absolute; z-index:12; left:50%; top:50%; transform:translate(-50%,-50%); width:min(330px,calc(100vw - 24px)); max-height:calc(100% - 20px); padding:30px 20px 18px;
  display:grid; gap:9px; pointer-events:auto; text-align:center; }
.pth-dialog p { margin:0; color:var(--dim); font:11px/1.35 Tahoma,sans-serif; }
.pth-dialog p.pth-name-row { color:var(--gold); font:bold 12px/1 Georgia,serif; min-height:12px; }
.pth-row { display:flex; gap:6px; justify-content:center; align-items:center; flex-wrap:wrap; }
.pth-dialog .pth-plate { --k:1.1; min-width:44px; }
.pth-dialog output { min-width:46px; color:var(--text); font:bold 12px/1 Tahoma,sans-serif; }
.pth-dialog .pth-slot { position:relative; margin:0; --k:1.1; }
.pth-dialog .pth-row.pth-grid { gap:4px; }

/* "rotate your phone" ------------------------------------------------------------------ */
.pth-rotate { position:absolute; inset:0; z-index:20; display:grid; place-items:center; align-content:center; gap:12px; padding:24px; background:#000d; pointer-events:auto; text-align:center; }
.pth-rotate b { color:var(--gold); font:bold 20px/1.2 Georgia,serif; }
.pth-rotate p { margin:0; color:var(--text); font:13px/1.4 Tahoma,sans-serif; }
.pth-rotate svg { width:56px; height:56px; fill:none; stroke:var(--gold); stroke-width:1.5; animation:pth-turn 1.6s ease-in-out infinite; }
.pth-rotate .pth-plate { --k:1.2; }
@keyframes pth-turn { 0%,30% { transform:none; } 60%,100% { transform:rotate(-90deg); } }

/* HUD editor ---------------------------------------------------------------------------- */
#pth.pth-editing [data-part] { pointer-events:auto; touch-action:none; outline:1px dashed #ffd623cc; outline-offset:3px; }
#pth.pth-editing [data-part]::before { content:attr(data-label); position:absolute; left:50%; top:calc(-15px * var(--k)); transform:translateX(-50%); z-index:3; padding:1px 6px; background:#000d;
  border:1px solid #a88a52; color:var(--gold); font:bold 9px/1.3 Georgia,serif; white-space:nowrap; pointer-events:none; }
#pth.pth-editing [data-part].pth-picked { outline:2px solid var(--gold); }
#pth.pth-editing [data-part].pth-off { opacity:.35; }

/* a native window is open (bag, skills...): only what closes it stays ------------------ */
#pth.pth-window > :not(.pth-close):not(.pth-exp):not(svg) { display:none!important; }
.pth-close { position:absolute; right:calc(var(--safe-r) + 140px * var(--k)); top:var(--safe-t); pointer-events:auto; display:none!important; --k:1.15; }
#pth.pth-window .pth-close { display:inline-flex!important; }

/* phone: short screens keep Menu / Quests / Bag in the quick bar ---------------------- */
#pth.pth-phone .pth-q.pth-tab-only { display:none; }
#pth.pth-phone.pth-short .pth-say { min-width:calc(110px * var(--k)); }

/* hide the generic touch buttons of mobile.js while the HUD runs ---------------------- */
.pth-on #pt-touch-ui, .pth-on #pt-toolbar { display:none!important; }
.pth-on #pt-stage { grid-column:1/-1!important; }

/* the page's online counter and FPS/ping (performance-hud.js) move out of the HUD's way,
   like pweb: players online by the minimap, FPS/ping small inside the EXP strip */
.pth-on #pt-online { top:max(6px,env(safe-area-inset-top))!important; left:auto!important; right:calc(20dvh + 14px)!important; transform:none!important;
  min-height:22px; padding:2px 9px; font-size:11px; pointer-events:none; }
.pth-on #pt-performance { top:auto!important; bottom:0!important; left:max(8px,env(safe-area-inset-left))!important; right:auto!important; transform:none!important;
  min-height:0; height:14px; padding:0; gap:4px; background:none!important; font:600 9px/14px Tahoma,sans-serif; pointer-events:none; z-index:61; }
.pth-on #pt-server-name { max-width:90px; }

/* status window (HTML): the Help box frame, three columns, + on bronze medallions ------- */
.pth-sheet { position:absolute; z-index:12; left:50%; top:50%; transform:translate(-50%,-50%); width:min(700px,calc(100vw - 16px)); height:min(440px,calc(100% - 22px));
  padding:30px 22px 48px; display:flex; flex-direction:column; gap:6px; pointer-events:auto; animation:pth-in .14s ease-out; }
.pth-sheet-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:0 2px 5px; border-bottom:1px solid #a88a5544; }
.pth-sheet-head b { color:var(--gold); font:bold 15px/1.1 Georgia,serif; }
.pth-sheet-head span { color:var(--text); font:12px/1.1 Georgia,serif; }
.pth-sheet-head em { margin-left:auto; color:var(--dim); font:11px/1.1 Tahoma,sans-serif; font-style:normal; }
.pth-sheet-body { flex:1; min-height:0; display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:10px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#a88a52 #0b120d; }
.pth-sheet-col { display:grid; align-content:start; gap:2px; padding:6px 8px; background:#0b120d99; border:1px solid #a88a5555; box-shadow:inset 0 0 0 1px #000; }
.pth-sheet-col h4 { margin:0 0 3px; color:var(--gold); font:bold 12px/1.4 Georgia,serif; letter-spacing:.04em; border-bottom:1px solid #a88a5544; }
.pth-sheet-col h4 output { color:#fff; }
.pth-sheet-row { display:flex; align-items:center; gap:8px; min-height:21px; font:12px/1.2 Tahoma,sans-serif; }
.pth-sheet-row span { flex:1; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pth-sheet-row b { color:#fff; font:bold 12px/1 Tahoma,sans-serif; }
.pth-sheet-gap { margin-top:6px; padding-top:5px; border-top:1px solid #a88a5544; }
.pth-plus { --k:1; flex:none; width:30px; height:28px; display:grid; place-items:center; }
.pth-plus svg { width:15px; height:15px; }
.pth-plus::before { display:none; }
.pth-plus:disabled { filter:grayscale(1) brightness(.55); }
.pth-sheet-hint { margin:4px 0 0; color:var(--dim); font:10px/1.3 Tahoma,sans-serif; }
.pth-sheet-foot { position:absolute; left:24px; right:24px; bottom:13px; display:flex; justify-content:space-between; gap:8px; }
#pth.pth-phone .pth-sheet { top:calc(50% + 7px); height:calc(100% - 30px); padding:26px 16px 44px; }
#pth.pth-phone .pth-sheet-row { min-height:19px; font-size:11px; }
#pth.pth-phone .pth-sheet-col { padding:4px 6px; }
@media (max-width:560px) { .pth-sheet-body { grid-template-columns:1fr; } }

/* mobile.js's ⋮ (keyboard / back): only while a game window is open, where a text field may need it */
.pth-on:not(.pth-native-window) #pt-menu-tools, .pth-on:not(.pth-native-window) #pt-menu-actions { display:none!important; }