/* «📱 وضع الجوال» shared button + menu (public/phone-mode.js). Sits in the game corner next to «الرجوع للصفحة الرئيسية». */
/* fit-fix v2 20261101 — ONE phone width for every game: main frame = 100vw minus the same gutter each side (8px, or the safe-area inset if larger), centred.
   Games use var(--gg-l)/var(--gg-r) for their frame's side padding/inset; scaled 720px stages use --gg-lpx/--stage-s (set by back-to-wheel.js). */
:root{--game-gutter:8px;--gg-l:max(var(--game-gutter),env(safe-area-inset-left,0px));--gg-r:max(var(--game-gutter),env(safe-area-inset-right,0px))}
.ajx-pm{position:relative;display:inline-flex;align-items:stretch;gap:0;pointer-events:auto;direction:inherit;font-family:inherit}
.ajx-pm-b,.ajx-pm-c{font:800 14px/1.2 inherit;font-family:inherit;cursor:pointer;color:#e9fbff;background:rgba(10,30,40,.92);border:2px solid #3ef0ff;white-space:nowrap;box-shadow:0 0 10px rgba(62,240,255,.35)}
.ajx-pm-b{padding:5px 12px;border-start-start-radius:10px;border-end-start-radius:10px;border-inline-end:0}
.ajx-pm-c{padding:5px 7px;border-start-end-radius:10px;border-end-end-radius:10px;font-size:11px}
.ajx-pm-b:hover,.ajx-pm-c:hover,.ajx-pm-b:focus-visible,.ajx-pm-c:focus-visible{opacity:1;background:rgba(62,240,255,.22)}
.ajx-pm-b.on{background:linear-gradient(90deg,#b45cff,#3ef0ff);color:#0b0d11;border-color:#fff;opacity:1;box-shadow:0 0 12px rgba(62,240,255,.55)}
.ajx-pm-b:disabled,.ajx-pm-c:disabled{cursor:not-allowed;opacity:.55}
.ajx-pm-m{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:260;min-width:250px;padding:10px 12px;border-radius:14px;background:rgba(12,10,26,.97);border:1px solid rgba(62,240,255,.45);box-shadow:0 10px 30px rgba(0,0,0,.6);color:#fff;text-align:start}
.ajx-pm-m[hidden]{display:none}
.ajx-pm-h{font:800 13px/1.3 inherit;font-family:inherit;margin-bottom:8px;color:#bff6ff}
.ajx-pm-seg{display:flex;gap:4px;background:rgba(255,255,255,.06);border-radius:10px;padding:3px}
.ajx-pm-seg button{flex:1;font:700 12.5px/1.2 inherit;font-family:inherit;padding:7px 6px;border:0;border-radius:8px;background:transparent;color:#d8dde6;cursor:pointer;white-space:nowrap}
.ajx-pm-seg button.on{background:linear-gradient(90deg,#b45cff,#3ef0ff);color:#0b0d11}
.ajx-pm-seg button:disabled{cursor:not-allowed;opacity:.6}
.ajx-pm-n{margin:8px 0 0;font:600 11.5px/1.4 inherit;font-family:inherit;color:#9aa4b2}
html.pm-clean .ajx-pm{display:none!important}
/* inside the 9:16 stage the page is a phone: keep the corner compact */
html.pm-P #gameCorner .ajx-pm-b,html.pm-P #gameCorner .ajx-pm-c{font-size:12px;padding:4px 9px}
html.pm-P #gameCorner .ajx-pm-c{padding:4px 6px}
/* corner pinned to a side (data-corner): in portrait put «الرجوع» + «📱» side by side so they stay in the thin top strip */
html.pm-P body[data-corner] #gameCorner{flex-direction:row-reverse;align-items:center}
.ajx-pm-b{display:inline-flex;align-items:center;gap:5px}
/* home page header slot */
#hdrPm{display:inline-flex;align-items:center;margin-inline:6px;flex:none}
#hdrPm .ajx-pm-b,#hdrPm .ajx-pm-c{font-size:13px;padding:7px 11px}
#hdrPm .ajx-pm-c{padding:7px 7px}
@media(max-width:600px){#hdrPm .ajx-pm-t{display:none}#hdrPm .ajx-pm-b{padding:6px 9px;font-size:15px}#hdrPm .ajx-pm-c{padding:6px 5px}#hdrPm .ajx-pm-m{inset-inline-end:auto;inset-inline-start:0}}
/* fallback corner for a game page without #gameCorner (phone-mode.js makes #ajxPmFloat): top corner, menu opens inward */
.ajx-pm-float{position:fixed;top:8px;inset-inline-start:8px;z-index:250}
.ajx-pm-float .ajx-pm-m{inset-inline-end:auto;inset-inline-start:0}
/* device tiers (phone-mode.js: html.dev-phone|dev-tablet|dev-desktop + html.touch) — bigger touch targets on phones/tablets */
html.touch .ajx-pm-b,html.touch .ajx-pm-c{min-height:38px}
html.dev-tablet #gameCorner .ajx-pm-b,html.dev-tablet #gameCorner .ajx-pm-c{font-size:15px;padding:7px 13px}
html.dev-tablet #gameCorner .ajx-pm-c{padding:7px 9px}
html.touch .ajx-pm-seg button{padding:10px 8px}
/* YouTube streamers: a clear two-way choice «📱 طولي | 🖥️ عرضي» instead of the single phone-mode button (phone-mode.js, html.pf-choice) */
.ajx-pm-ytg .ajx-pm-b{display:none}
.ajx-pm-yt{display:inline-flex;align-items:stretch;border:2px solid #3ef0ff;border-inline-end:0;border-start-start-radius:10px;border-end-start-radius:10px;overflow:hidden;background:rgba(10,30,40,.92);box-shadow:0 0 10px rgba(62,240,255,.35)}
.ajx-pm-yt button{font:800 14px/1.2 inherit;font-family:inherit;cursor:pointer;color:#e9fbff;background:transparent;border:0;padding:5px 11px;white-space:nowrap}
.ajx-pm-yt button+button{border-inline-start:1px solid rgba(62,240,255,.45)}
.ajx-pm-yt button.on{background:linear-gradient(90deg,#b45cff,#3ef0ff);color:#0b0d11}
.ajx-pm-yt button:hover:not(.on),.ajx-pm-yt button:focus-visible{background:rgba(62,240,255,.22)}
.ajx-pm-yt button:disabled{cursor:not-allowed;opacity:.55}
html.pm-P #gameCorner .ajx-pm-yt button{font-size:12px;padding:4px 8px}
html.touch .ajx-pm-yt button{min-height:34px}
/* Arty 20261028 «خلي كل اطار بنفس لون الشعار»: native phone portrait (no 9:16 stage) gets the ArtyJx logo-gradient frame
   (cyan #3ef0ff → purple #b45cff) on the screen edge: 2px + soft inner glow, never catches taps. Staged pages get #ajxPmFrame from phone-mode.js;
   desktop landscape (pm-L) stays unframed. */
#ajxPmEdge{display:none}
html.pm-P:not(.pm-staged) #ajxPmEdge{display:block;position:fixed;inset:0;z-index:2147483000;pointer-events:none;border:2px solid transparent;border-radius:0;
  border-image:linear-gradient(160deg,#3ef0ff 0%,#7fa6ff 50%,#b45cff 100%) 1;box-shadow:inset 0 0 12px rgba(62,240,255,.28),inset 0 0 24px rgba(180,92,255,.18)}
/* Arty 20261029 — the layout follows the streamer's linked platform (phone-mode.js html.pf-lock / html.pf-choice):
   TikTok / Kick / Twitch: no layout buttons at all (a page's own «📱» button + its «شكل الواجهة» settings row are hidden too; the OBS links stay).
   YouTube: just the two-way «🖥️ بيسي | 📱 جوال» choice — no ▾ menu, no old «📱» button, no 3-way settings row. */
html.pf-lock .ajx-pm,html.pf-lock .mob,html.pf-lock [data-pm-btn],html.pf-lock .ajx-pm-float,
html.pf-lock .seg.lay,html.pf-lock .seg.lay~.lock,html.pf-lock [data-i18n="gp.s_layout"],html.pf-lock [data-i18n="gp.s_layout_p"]{display:none!important}
html.pf-choice .mob,html.pf-choice .seg.lay,html.pf-choice .seg.lay~.lock,html.pf-choice [data-i18n="gp.s_layout"],html.pf-choice [data-i18n="gp.s_layout_p"]{display:none!important}
.ajx-pm-ytg .ajx-pm-c,.ajx-pm-ytg .ajx-pm-m{display:none!important}
.ajx-pm-ytg .ajx-pm-yt{border-inline-end:2px solid #3ef0ff;border-radius:10px}
.ajx-pm-own{display:inline-flex;align-items:center}

/* Arty 2026-10-30: the «بيسي | جوال» toggle looks the SAME on every page (home header + games): only the active side carries the gradient
   (a page's generic button styles must not paint the inactive side), fixed font so it never falls back to the browser default */
#ajxPm .ajx-pm-yt button:not(.on){background:transparent!important;color:#e9fbff!important;box-shadow:none!important}
#ajxPm .ajx-pm-yt button.on{background:linear-gradient(90deg,#b45cff,#3ef0ff)!important;color:#0b0d11!important}
/* 📷 camera-zone switch (phone-mode.js, all game pages; Arty 20261101): sits in the game corner next to the layout button */
.ajx-cam-b{pointer-events:auto;cursor:pointer;font:700 15px/1.15 "Segoe UI Emoji","Apple Color Emoji",sans-serif;padding:5px 8px;border-radius:10px;color:#e9fbff;background:rgba(10,30,40,.92);border:2px solid rgba(62,240,255,.35);opacity:.85;flex:none}
.ajx-cam-b.on{border-color:#3ef0ff;box-shadow:0 0 10px rgba(62,240,255,.35);opacity:1}
.ajx-cam-b:not(.on){filter:grayscale(1)}
.ajx-cam-b:hover,.ajx-cam-b:focus-visible{opacity:1;background:rgba(62,240,255,.22)}
html.pm-P .ajx-cam-b{padding:4px 6px;font-size:14px}
html.pm-clean .ajx-cam-b{display:none}