/* A single play surface. Keep the existing 1000:650 projection and touch layout. */
body.gameCanvasActive { background:#080f16; }
body.gameCanvasActive > .page { width:100%; max-width:none; margin:0; padding:12px; box-sizing:border-box; }
body.gameCanvasActive > .page::before { display:none; }
#gameUi > :is(.topbar,.configGrid,#battleBuildGuidance) { display:none !important; }
body:not(.touchDevice) #gameUi:not(.hidden) { display:grid; place-items:center; min-height:calc(100dvh - 24px); }
body:not(.touchDevice) #gameUi > #gameFrame {
  width:min(100%,calc((100dvh - 24px) * var(--game-aspect,1.5384615))); margin:0 auto;
  border:1px solid #ae97633f; border-radius:10px; box-sizing:border-box;
  box-shadow:0 12px 48px #0006; background:#101a22;
}
body:not(.touchDevice) #gameUi #game { width:100%; height:auto; aspect-ratio:var(--game-aspect,1000/650); border:0; border-radius:9px; box-shadow:none; }
/* Touch headers use the safe-area lanes in mobile-gameplay.css. The ID list
   below also raises :is() specificity for class-based PvP/Siege headers. */
body:not(.touchDevice) #gameFrame > :is(#duelScorebar,#ffaLeaderboard,#coopBossHud,#siegeHud,.pvpDuelHeader,.sg-header) {
  position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:25;
  width:min(680px,calc(100% - 210px)); box-sizing:border-box; margin:0; padding:0;
}
body:not(.touchDevice) #gameFrame > :is(#duelScorebar,#coopBossHud,#siegeHud) { padding:9px 13px; background:#111e2bee; border:1px solid #af94684d; border-radius:8px; }
body:not(.touchDevice) #gameFrame > #duelScorebar { width:min(430px,calc(100% - 200px)); gap:10px; }
#gameFrame #duelScorebar .playerCard { min-height:0; padding:5px 9px; background:transparent; border:0; }
#gameFrame #duelScorebar .playerCard strong { font-size:24px; }
body:not(.touchDevice) #gameFrame > #ffaLeaderboard { width:200px; max-height:30%; overflow:auto; left:12px; transform:none; padding:10px; background:#111e2bee; border-radius:8px; }
#ffaPopulation, #coopPartyCount { display:none; }
.pvpDuelMode #duelScorebar, .siegeMode :is(#siegeHud,#duelScorebar) { display:none !important; }
#gameFrame .pvpCourtLine, #gameFrame .sg-courtline { display:none; }
#gameFrame .pvpScoreboard { gap:6px; grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr); }
#gameFrame .pvpHealth { grid-template-columns:38px minmax(0,1fr); padding:7px; gap:7px; }
#gameFrame .pvpPortrait { width:38px; height:38px; }
#gameFrame .pvpPlayerName { font-size:12px; }
#gameFrame .pvpNameRow { margin-bottom:4px; gap:4px; flex-wrap:wrap; }
#gameFrame .pvpHpText { font-size:10px; }
#gameFrame .pvpHpTrack { height:8px; }
#gameFrame .pvpHealthMeta { min-height:10px; }
#gameFrame .sg-scoreboard { gap:6px; }
#gameFrame .sg-objective { padding:7px; }
#gameFrame .sg-objective-top { gap:5px; }
#gameFrame .sg-roster { display:none; }
#gameFrame .sg-tactical-line { padding:5px 9px; background:#111e2bea; border-radius:0 0 6px 6px; }
#gameFrame .sg-tactical-line .sg-live-notice:empty { display:none; }
#hudMenuPanel #backButton { margin-top:6px; color:#e8c6ad; }

/* Menu copy stays short; practical account and activity choices remain available. */
.lobbyUtilities { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 24px; }
.lobbyUtilities .lobbyWordmark { color:#dfcca7; font:600 16px/1.3 Georgia,serif; letter-spacing:.03em; }
.lobbyUtilities nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.lobbyUtilities button { border:1px solid #af99704d; border-radius:6px; padding:9px 13px; background:#17232de8; color:#e8dfcf; font:600 12px/1.3 system-ui; cursor:pointer; }
.lobbyUtilities button:hover { background:#2a3943; border-color:#dac28d; }
.lobbyUtilities button:focus-visible { outline:2px solid #f1d79b; outline-offset:3px; }
#modeScreen .modeIntro { margin-bottom:20px; }
#modeScreen .modeIntro h1 { font-size:clamp(26px,3vw,38px); margin:0; }
#modeScreen .modeIntro > :is(.eyebrow,p) { display:none; }
#modeScreen .spellmendHubHeader, #modeScreen .spellmendActivityFoot, #modeScreen .spellmendHallNote { display:none; }
#modeScreen .spellmendActivity .spellmendActivityFoot { display:none; }
#modeScreen .spellmendActivitySection > span:last-child { display:none; }
#modeScreen .spellmendActivityMeta { letter-spacing:.09em; }
#modeScreen .accountMenuPanel > .menuHint { display:none; }
#modeScreen .spellmendWizardSettings .menuHint { font-size:11px; }
#modeScreen .spellmendActivityDescription { line-height:1.55; }
#tutorialOffer:empty { display:none; }

/* The same safe notice host follows menu screens; match notices stay in-frame. */
#message.gameNotifications[data-in-game="false"] {
  position:sticky; inset:auto; bottom:16px; width:min(520px,calc(100% - 24px));
  max-width:100%; margin:16px auto 0; transform:none; padding:0; z-index:60;
}
@media(max-width:700px) {
  body.gameCanvasActive > .page { padding:4px; }
  body:not(.touchDevice) #gameUi:not(.hidden) { min-height:calc(100dvh - 8px); }
  body:not(.touchDevice) #gameUi > #gameFrame { width:min(100%,calc((100dvh - 8px) * var(--game-aspect,1.5384615))); border-radius:6px; }
  body:not(.touchDevice) #gameFrame > :is(.pvpDuelHeader,.sg-header) { top:8px; left:8px; transform:none; width:calc(100% - 104px); }
  #gameFrame .pvpHealth { display:block; }
  #gameFrame .pvpPortrait { display:none; }
  #gameFrame .pvpScoreboard { grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr); }
  #gameFrame .pvpNameRow { display:block; }
  .lobbyUtilities { margin-bottom:18px; }
}
body.touchDevice.mobileMatchMode.gameCanvasActive > .page { padding:0; }
body.touchDevice.mobileMatchMode #gameFrame { border-radius:0; }

/* Fullscreen (element API or the browser's own F11): the frame drops its border,
   radius and page padding so the play surface reaches the screen edges. With
   screen fit on, --game-aspect matches the display and no letterbox remains. */
body.fullscreenActive.gameCanvasActive { background:#000; }
body.fullscreenActive.gameCanvasActive > .page { padding:0; }
body.fullscreenActive:not(.touchDevice) #gameUi:not(.hidden) { min-height:100dvh; }
body.fullscreenActive:not(.touchDevice) #gameUi > #gameFrame { width:min(100vw,calc(100dvh * var(--game-aspect,1.5384615))); border:0; border-radius:0; box-shadow:none; background:#000; }
body.fullscreenActive:not(.touchDevice) #gameUi #game { border-radius:0; }
body.fullscreenActive:not(.touchDevice) #game:focus-visible { outline:none; }
/* Interface size (Settings > Video) scales the desktop HUD widgets together. */
body:not(.touchDevice) #gameFrame > :is(.combatAbilityDock,#experienceHud,#runToggleButton,#duelScorebar,#ffaLeaderboard,#coopBossHud,#siegeHud,#hudMenuButton,.exploreHudQuickDock,.exploreProgressHud,.pvpDuelHeader,.sg-header,#targetFrame) { zoom:var(--ui-scale,1); }
/* Desktop fullscreen shortcut (hud-layout.js) sits left of Menu with the same
   chrome, icon-only at a 38x40 hit target. Its right offset clears Menu's
   "☰ Menu" width plus an 8px gap; both scale together under --ui-scale. Touch
   keeps #mobileFullscreenButton, and [hidden] covers unsupported browsers. */
#hudFullscreenToggle {
  position:absolute;top:12px;right:102px;z-index:39;width:38px;min-height:40px;padding:8px 0;
  border:1px solid #ac936977;border-radius:8px;background:#14212dee;box-shadow:0 3px 12px #0005;
  color:#cdb987;font:400 18px/22px system-ui;text-align:center;cursor:pointer;
}
#hudFullscreenToggle[hidden], body.touchDevice #hudFullscreenToggle { display:none!important; }
#hudFullscreenToggle:hover { background:#344254;border-color:#cdb889; }
#hudFullscreenToggle:focus-visible { outline:2px solid #f1d79b;outline-offset:3px; }
#hudFullscreenToggle[data-fullscreen="true"] { border-color:#e2c995;background:#26333c;color:#f1e3c5; }
body:not(.touchDevice) #gameFrame > #hudFullscreenToggle { zoom:var(--ui-scale,1); }
@media(max-width:740px) { #hudFullscreenToggle { top:8px;right:99px;min-height:42px; } }