/* pbPT viewport and touch shell. Native aspect ratio is chosen before startup. */
#pt-toolbar { display:none; align-items:center; justify-content:center; gap:8px; padding:6px; color:#e7e0cf; font:14px system-ui,sans-serif; }
#pt-toolbar button,#pt-touch-ui button,#pt-text-dialog button { font:inherit; color:#f2db9d; background:linear-gradient(145deg,#30213e,#110e18); border:1px solid #9b8050; box-shadow:inset 0 0 0 2px #100c18b3,0 2px 6px #0008; border-radius:10px; min-height:44px; padding:8px 12px; cursor:pointer; }
#pt-toolbar button:focus-visible,#pt-touch-ui button:focus-visible,#pt-text-dialog :focus-visible { outline:3px solid #77cdf4; outline-offset:2px; }
#pt-toolbar button[aria-pressed=true],#pt-touch-ui button[data-held=true] { background:#6a4d23; border-color:#efc778; }
#pt-toolbar [data-mobile-only],#pt-touch-ui { display:none; }
#pt-stage { display:flex; align-items:center; justify-content:center; max-width:100%; }
#pt-orientation { display:none; }
.pt-touch body { overflow:hidden; overscroll-behavior:none; height:var(--pt-vh,100dvh); }
.pt-touch #wrap { display:grid; grid-template-columns:82px minmax(0,1fr) 152px; grid-template-rows:minmax(0,1fr); height:var(--pt-vh,100dvh); padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); gap:4px; box-sizing:border-box; }
.pt-touch #pt-toolbar { display:flex; grid-column:1; grid-row:1; flex-direction:column; justify-content:center; box-sizing:border-box; width:100%; height:100%; min-height:0; padding:4px; gap:8px; }
.pt-touch #pt-toolbar button { min-height:44px; width:100%; padding:5px; font-size:12px; }
.pt-touch #pt-toolbar #pt-toggle { display:none; }
.pt-touch #pt-toolbar [data-mobile-only] { display:inline-flex; align-items:center; justify-content:center; }
.pt-touch #pt-toolbar .pt-desktop-label { display:none; }
.pt-touch #pt-stage { grid-column:2; grid-row:1; min-width:0; min-height:0; width:100%; height:100%; overflow:hidden; }
.pt-touch #canvas { flex:none; max-width:100%; max-height:100%; object-fit:contain; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.pt-touch #bar,.pt-touch #log { display:none; }
.pt-touch #pt-touch-ui { display:grid; grid-column:3; grid-row:1; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; gap:6px; width:100%; height:100%; min-height:0; box-sizing:border-box; padding:4px; background:#100f15; }
.pt-touch #pt-touch-ui button { min-width:0; padding:6px 3px; font-size:12px; }
.pt-touch #pt-touch-ui [data-key=Escape],.pt-touch #pt-touch-ui .pt-menu-key { grid-column:span 2; }
#pt-touch-ui button { min-width:44px; touch-action:none; user-select:none; -webkit-user-select:none; }
#pt-touch-ui .pt-combat { display:none; }
.pt-touch.pt-playing #pt-touch-ui .pt-combat { display:inline-block; }
.pt-touch.pt-playing #pt-touch-ui .pt-menu-key { display:none; }
#pt-touch-ui .pt-attack { background:#5b2524; border-color:#c67360; }
#pt-touch-ui .pt-skill { background:#24395b; border-color:#72a1d7; }
#pt-touch-ui [data-key='1'] { color:#ffb4b4; }
#pt-touch-ui [data-key='2'] { color:#b8caff; }
#pt-touch-ui [data-key='3'] { color:#c2f2bd; }
.pt-touch.pt-portrait #pt-orientation { display:flex; position:fixed; inset:0; z-index:100; flex-direction:column; justify-content:center; align-items:center; margin:0; padding:32px; background:#100f18; font:20px/1.6 system-ui,sans-serif; color:#f5e5bc; text-align:center; }
.pt-touch.pt-portrait #pt-orientation::before { content:'↻'; display:block; font-size:76px; line-height:1.4; color:#dfbb79; }
.pt-touch.pt-portrait #pt-stage,.pt-touch.pt-portrait #pt-touch-ui,.pt-touch.pt-portrait #pt-toolbar { pointer-events:none; visibility:hidden; }
@media (max-height:350px) and (orientation:landscape) { .pt-touch #wrap { grid-template-columns:74px minmax(0,1fr) 146px; } .pt-touch #pt-touch-ui { gap:3px; } }
#pt-message { position:fixed; top:max(58px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); max-width:85vw; padding:8px 14px; border-radius:8px; background:#25232b; color:#fff1cf; z-index:120; font:14px system-ui,sans-serif; pointer-events:none; }
#pt-message[hidden],#pt-text-dialog[hidden] { display:none; }
#pt-text-dialog { position:fixed; inset:0; height:var(--pt-vh,100dvh); z-index:110; background:#08080cdd; display:flex; align-items:center; justify-content:center; padding:12px; box-sizing:border-box; color:#f4ebd7; font:16px system-ui,sans-serif; }
#pt-text-dialog form { width:min(440px,100%); max-height:100%; overflow:auto; padding:18px; box-sizing:border-box; background:#19171f; border:1px solid #827052; border-radius:16px; }
#pt-text-dialog h2 { margin:0 0 10px; font-size:20px; }
#pt-text-dialog p { margin:8px 0 12px; font-size:13px; color:#cec3af; }
#pt-text-dialog label { display:block; margin:8px 0; }
#pt-text-dialog input[type=text],#pt-text-dialog input[type=password],#pt-text-dialog select { font:16px system-ui,sans-serif; padding:12px; box-sizing:border-box; width:100%; background:#09090e; color:#fff; border:1px solid #827052; border-radius:8px; }
#pt-text-dialog .pt-dialog-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
#pt-text-dialog .pt-send { background:#5c4728; }
.pt-immersive body { overflow:hidden; height:var(--pt-vh,100dvh); }
.pt-immersive #wrap { position:fixed; inset:0; width:100%; height:var(--pt-vh,100dvh); display:block; padding:0; gap:0; }
.pt-immersive #pt-stage { width:100%; height:100%; background:#000; }
.pt-immersive #canvas { display:block; max-width:100%; max-height:100%; }
.pt-immersive #bar,.pt-immersive #log { display:none; }
#pt-desktop-fullscreen { position:fixed; right:12px; top:12px; z-index:25; min-width:44px; min-height:44px; border:1px solid #a98a50; border-radius:8px; background:#15101cbb; color:#efd59a; font-size:26px; cursor:pointer; }
.pt-touch #pt-desktop-fullscreen { display:none; }
.pt-touch #wrap { display:block; }
.pt-touch #pt-toolbar { position:absolute; z-index:25; left:max(8px,env(safe-area-inset-left)); top:64px; width:74px; height:auto; padding:0; background:none; }
.pt-touch #pt-touch-ui { position:absolute; z-index:24; right:max(8px,env(safe-area-inset-right)); top:50%; transform:translateY(-50%); width:144px; height:auto; background:none; padding:0; }
/* Landscape combat composition, inspired by the supplied mobile references.
   Original game HUD is kept; no invented HP, skill or player counts. */
.pt-touch.pt-playing #wrap { display:block; position:relative; }
.pt-touch.pt-playing #pt-toolbar { position:absolute; z-index:25; left:max(8px,env(safe-area-inset-left)); top:64px; width:74px; height:auto; padding:0; background:none; }
.pt-touch.pt-playing #pt-touch-ui { display:block; position:absolute; z-index:24; right:max(8px,env(safe-area-inset-right)); top:auto; transform:none; bottom:max(84px,env(safe-area-inset-bottom)); width:164px; height:232px; background:none; padding:0; pointer-events:none; }
.pt-touch.pt-playing #pt-touch-ui button { position:absolute; width:48px; height:48px; padding:2px; border-radius:50%; pointer-events:auto; font:600 12px Georgia,serif; }
.pt-touch.pt-playing #pt-touch-ui .pt-attack { left:52px; top:69px; width:64px; height:64px; font-size:13px; border:2px solid #e5bf6e; background:radial-gradient(circle,#78502a,#211327 75%); }
.pt-touch.pt-playing #pt-touch-ui .pt-skill { left:58px; top:8px; border-color:#c398e5; background:radial-gradient(circle,#744194,#20162d 75%); font-size:10px; }
.pt-touch.pt-playing #pt-touch-ui [data-key=F1] { left:0; top:58px; }
.pt-touch.pt-playing #pt-touch-ui [data-key=F2] { left:116px; top:58px; }
.pt-touch.pt-playing #pt-touch-ui [data-key=F3] { left:0; top:120px; }
.pt-touch.pt-playing #pt-touch-ui [data-key=F4] { left:116px; top:120px; }
.pt-touch.pt-playing #pt-touch-ui [data-key='1'] { left:0; top:184px; border-radius:10px; background:linear-gradient(#4d2430,#160e15); }
.pt-touch.pt-playing #pt-touch-ui [data-key='2'] { left:58px; top:184px; border-radius:10px; background:linear-gradient(#253657,#10121d); }
.pt-touch.pt-playing #pt-touch-ui [data-key='3'] { left:116px; top:184px; border-radius:10px; background:linear-gradient(#274232,#0e1712); }
.pt-touch.pt-playing #pt-touch-ui [data-key=v] { position:fixed; left:max(8px,env(safe-area-inset-left)); bottom:max(8px,env(safe-area-inset-bottom)); width:64px; border-radius:10px; }
.pt-touch.pt-playing #pt-touch-ui [data-key=s] { position:fixed; left:80px; bottom:max(8px,env(safe-area-inset-bottom)); width:64px; border-radius:10px; }
.pt-touch.pt-playing #pt-touch-ui [data-key=Escape] { position:fixed; left:max(8px,env(safe-area-inset-left)); top:max(8px,env(safe-area-inset-top)); width:74px; border-radius:10px; }

/* Native menus need the whole game area, including their close/confirm buttons. */
#pt-menu-tools,#pt-menu-actions { display:none; }
.pt-touch.pt-menu-open #pt-toolbar,.pt-touch.pt-menu-open #pt-touch-ui,.pt-touch.pt-full-map #pt-toolbar,.pt-touch.pt-full-map #pt-touch-ui { visibility:hidden; pointer-events:none; }
.pt-touch.pt-menu-open #pt-menu-tools,.pt-touch.pt-full-map #pt-menu-tools { display:block; position:fixed; z-index:30; right:max(8px,env(safe-area-inset-right)); top:max(8px,env(safe-area-inset-top)); width:44px; height:44px; padding:0; color:#f2db9d; background:#15101cbb; border:1px solid #9b8050; border-radius:10px; font-size:30px; cursor:pointer; }
.pt-touch.pt-menu-open #pt-menu-actions:not([hidden]),.pt-touch.pt-full-map #pt-menu-actions:not([hidden]) { display:flex; position:fixed; z-index:31; right:max(8px,env(safe-area-inset-right)); top:max(58px,calc(env(safe-area-inset-top) + 50px)); gap:6px; padding:6px; max-width:calc(100vw - 16px); box-sizing:border-box; border:1px solid #9b8050; border-radius:10px; background:#15101cf5; }
#pt-menu-actions button { min-width:64px; min-height:44px; padding:6px; border:1px solid #9b8050; border-radius:6px; background:#30213e; color:#f2db9d; font:14px system-ui,sans-serif; cursor:pointer; }
#pt-menu-tools:focus-visible,#pt-menu-actions button:focus-visible { outline:3px solid #77cdf4; outline-offset:2px; }
.pt-touch.pt-portrait #pt-menu-tools,.pt-touch.pt-portrait #pt-menu-actions { display:none; }

.pt-touch #wrap { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#pt-message { overflow-wrap:anywhere; box-sizing:border-box; }

/* Portuguese action labels need room inside their touch targets. */
.pt-touch.pt-playing #pt-touch-ui .pt-skill { left:52px; top:0; width:64px; height:64px; }
.pt-touch.pt-playing #pt-touch-ui [data-key=s] { left:calc(max(8px,env(safe-area-inset-left)) + 72px); width:96px; }

/* Keep combat captions clear of the native minimap. */
.pt-touch.pt-playing #pt-touch-ui { right:calc(max(8px,env(safe-area-inset-right)) + max(112px,18vh)); }
@media(max-height:359px) { .pt-touch.pt-playing #pt-toolbar { display:grid; grid-template-columns:74px 74px; gap:4px; width:152px; } .pt-touch.pt-playing #pt-touch-ui { bottom:max(48px,env(safe-area-inset-bottom)); } }

/* Keep map captions clear, including the top-right frozen region on phones. */
.pt-full-map #pt-performance,.pt-full-map #pt-online{display:none!important}
.pt-touch.pt-full-map #pt-menu-tools{top:auto;right:auto;left:8px;bottom:8px}
.pt-touch.pt-full-map #pt-menu-actions:not([hidden]){top:auto;right:auto;left:8px;bottom:58px}

/* Touch mode has no side columns: the game's own interface takes over (touch HUD in the
   world, native buttons on character select). The ⋮ keeps Keyboard/Back for the name field. */
.pt-touch #pt-toolbar,.pt-touch #pt-touch-ui { display:none!important; }
.pt-touch #wrap { grid-template-columns:minmax(0,1fr); }
.pt-touch #pt-stage { grid-column:1; }
.pt-touch.pb-character-toolbar-open #pt-menu-tools { display:block; position:fixed; z-index:30; left:max(8px,env(safe-area-inset-left)); top:max(8px,env(safe-area-inset-top)); width:44px; height:44px; padding:0; color:#f2db9d; background:#15101cbb; border:1px solid #9b8050; border-radius:10px; font-size:30px; cursor:pointer; }
.pt-touch.pb-character-toolbar-open #pt-menu-actions:not([hidden]) { display:flex; position:fixed; z-index:31; left:max(8px,env(safe-area-inset-left)); top:max(58px,calc(env(safe-area-inset-top) + 50px)); gap:6px; padding:6px; max-width:calc(100vw - 16px); box-sizing:border-box; border:1px solid #9b8050; border-radius:10px; background:#15101cf5; }
.pt-touch.pt-portrait #pt-menu-tools,.pt-touch.pt-portrait #pt-menu-actions { display:none; }